From 4bb743342bd49d1ccb1ff76e7a8f98eb706f29f9 Mon Sep 17 00:00:00 2001
From: Valentyne Stigloher <pixunil@posteo.eu>
Date: Mon, 21 Jul 2025 15:23:11 +0200
Subject: [PATCH] (style)(nouns) prevent overflowing in dictionary (especially
 present on mobile)

---
 assets/nouns.scss              | 10 +++++-----
 components/nouns/NounsItem.vue |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/assets/nouns.scss b/assets/nouns.scss
index e2e023984..440cc4be9 100644
--- a/assets/nouns.scss
+++ b/assets/nouns.scss
@@ -2,7 +2,7 @@
 
 .nouns-table {
     .row-header {
-        grid-template-columns: 1fr 1fr 1fr 3em;
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 3em;
     }
 
     .row-content {
@@ -13,21 +13,21 @@
             "nbLabel nb nbPl"
             "sources sources sources"
             "buttons buttons buttons"
-            / auto 1fr 1fr;
+            / auto minmax(0, 1fr) minmax(0, 1fr);
 
         @include media-breakpoint-up('md', $grid-breakpoints) {
             grid:
                 "masc fem neutr buttons"
                 "mascPl femPl neutrPl buttons"
                 "sources sources sources buttons"
-                / 1fr 1fr 1fr 3em;
+                / minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 3em;
         }
     }
 }
 
 .nouns-table-nonbinary {
     .row-header {
-        grid-template-columns: 1fr 1fr 1fr 1fr 3em;
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 3em;
     }
 
     .row-content {
@@ -36,7 +36,7 @@
                 "masc fem neutr nb buttons"
                 "mascPl femPl neutrPl nbPl buttons"
                 "sources sources sources sources buttons"
-                / 1fr 1fr 1fr 1fr 3em;
+                / minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 3em;
         }
     }
 }
diff --git a/components/nouns/NounsItem.vue b/components/nouns/NounsItem.vue
index 4b83124f5..6c34bfa1d 100644
--- a/components/nouns/NounsItem.vue
+++ b/components/nouns/NounsItem.vue
@@ -41,7 +41,7 @@ const visibleWords = computed(() => {
 </script>
 
 <template>
-    <ul :class="[`list-${numerus}`, 'mb-0 ps-0']">
+    <ul class="mb-0 ps-0 overflow-auto h-100" :class="`list-${numerus}`">
         <li v-for="(word, i) of visibleWords" :key="i">
             <NounsWordDisplay :word :numerus />
         </li>