From 05e3b607a2501350dbcb439e0ce441cb592add97 Mon Sep 17 00:00:00 2001 From: Julien Oculi Date: Tue, 25 Jun 2024 16:12:13 +0200 Subject: [PATCH] fix(client): :lipstick: css grid overflow on small devices --- client/style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/style.css b/client/style.css index 4e76cd8..1f59ceb 100644 --- a/client/style.css +++ b/client/style.css @@ -4,6 +4,7 @@ --padding: 0.5rem; --padding-half: calc(var(--padding) / 2); --border-size: 0.2rem; + --max-width: min(calc(100dvw - 1rem), 700px); } * { @@ -80,14 +81,14 @@ button { .inputs { display: grid; - grid-template-columns: repeat(auto-fill, minmax(700px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(var(--max-width), 1fr)); gap: var(--padding); width: 100%; } .infos { display: grid; - grid-template-columns: repeat(auto-fill, minmax(800px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(var(--max-width), 1fr)); flex-wrap: wrap; gap: var(--padding); justify-content: space-between;