Keep the Menu Items square, while filling container

front/src/components/MenuItem.svelte

@@ -4,19 +4,32 @@
 
     import { type Item, Labels} from "../lib/types";
     import LoadingImage from '/MenuItemLoadingAlt.svg';
+    import {onMount} from "svelte";
 
     export let item: Item;
+
+    let element: HTMLElement;
+
+    onMount(() => {
+        keepSquare();
+    })
+
+    function keepSquare() {
+        element.style.height = "";
+        element.style.height = element.offsetWidth + "px";
+    }
 </script>
 
-<div class="menu-item">
+<svelte:window on:resize={keepSquare}></svelte:window>
+
+<div class="menu-item" bind:this={element}>
     {#if item.images}
         <img src={item.images[0]} alt="" class="menu-item-image">
     {:else}
         <img src={LoadingImage} alt="" class="menu-item-image">
     {/if}
 
-    <div class="menu-item-header">
+    <ul class="menu-item-labels">
-        <ul>
         {#each item.labels as label}
             {#if label === Labels.vegan}
                 <li class="vegan"><Leaf weight="fill" /></li>
@@ -31,10 +44,10 @@
             {/if}
         {/each}
     </ul>
-        <a href="/item/{item.uuid}" use:link>
+
+    <a class="menu-item-link" href="/item/{item.uuid}" use:link>
         View&nbsp;<ArrowUpRight />
     </a>
-    </div>
 
     <ul class="menu-item-detail">
         <li>{item.name}</li>

front/src/components/MenuList.svelte

@@ -14,16 +14,24 @@
 </ul>
 
 <style lang="scss">
+    @import "../styles/vars";
+
     ul {
         list-style-type: none;
         padding: 0;
         margin: 0;
-        display: flex;
+        display: grid;
-        flex-direction: row;
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-        flex-wrap: wrap;
+        gap: $spacing-small;
-        gap: 16px
+
-    }
+        > li {
-    li {
             margin: 0;
         }
+    }
+
+    @media only screen and (max-width: 900px) {
+        ul {
+            grid-template-columns: 1fr 1fr 1fr;
+        }
+    }
 </style>

front/src/pages/PageMenu.svelte

@@ -202,7 +202,14 @@
         }
     }
 
-    @media only screen and (max-width: 670px) {
+    @media only screen and (max-width: 900px) {
+        #filter {
+            min-width: calc(250px - $spacing-normal);
+            max-width: calc(250px - $spacing-normal);
+        }
+    }
+
+    @media only screen and (max-width: 700px) {
         .menu {
             flex-direction: column;
         }

front/src/styles/_menu_item.scss

@@ -1,15 +1,8 @@
 .menu-item {
     padding: $spacing-normal;
 
-    width: 200px;
-    height: 200px;
-
     position: relative;
 
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-
     border-radius: $border-radius-large;
     background-color: $color-dark;
 
@@ -28,20 +21,46 @@
     z-index: 1;
 }
 
-.menu-item-header {
+.menu-item-link {
-    position: relative;
+    padding-left: 10px;
+    padding-right: 10px;
+
+    height: 30px;
+
+    position: absolute;
+    top: $spacing-small;
+    right: $spacing-small;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    text-decoration: none;
+    font-size: 14px;
+
+    border-radius: $border-radius-circle;
+    background-color: $color-dark;
+    color: $color-on-dark;
+
+    z-index: +2;
+
+    &:hover {
+        background-color: $color-light;
+        color: $color-on-light;
+    }
+}
+
+.menu-item-labels {
+    padding: 0;
+
+    position: absolute;
+    top: $spacing-small;
+    left: calc($spacing-normal + $spacing-small);
 
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
 
-    z-index: 2;
+    z-index: +2;
-
-    > ul {
-        padding: 0 0 0 $spacing-normal;
-
-        display: flex;
-        flex-direction: row;
 
     > li {
         margin: 0 0 0 -15px;
@@ -75,37 +94,16 @@
             background-color: $color-spicy;
         }
     }
-    }
-
-    > a {
-        padding-left: 10px;
-        padding-right: 10px;
-
-        height: 30px;
-
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        text-decoration: none;
-        font-size: 14px;
-
-        border-radius: $border-radius-circle;
-        background-color: $color-dark;
-        color: $color-on-dark;
-
-        &:hover {
-            background-color: $color-light;
-            color: $color-on-light;
-        }
-    }
 }
 
 .menu-item-detail {
-    margin: -$spacing-normal;
     padding: $spacing-normal;
 
-    position: relative;
+    width: 100%;
+
+    position: absolute;
+    left: 0;
+    bottom: 0;
 
     display: flex;
     flex-direction: column;
@@ -119,5 +117,8 @@
 
     > li {
         list-style: none;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 }