menu and shopping cart css improvements

package.json

@@ -27,7 +27,7 @@
         "test": "react-scripts test",
         "eject": "react-scripts eject",
         "sass-task:scss-compile": "node-sass-chokidar -r src -o src",
-        "sass-task:autoprefix": "postcss src/**/**/*.css src/**/**/**/*.css src/*.scss -r -u autoprefixer ",
+        "sass-task:autoprefix": "postcss src/**/**/*.css src/**/**/**/*.css src/*.css -r -u autoprefixer ",
         "sass:build": "npm-run-all -p sass-task:*",
         "sass:watch": "chokidar src/**/**/*.scss src/**/**/**/*.scss src/*.scss -c \"npm run sass:build\"",
         "dev:sass": "npm-run-all -p sass:*",

src/views/Menu/Menu.scss

@@ -1,7 +1,8 @@
 #menu {
     display: grid;
+    //flex-direction:column;
     grid-template-columns: 1fr;
-    grid-template-rows: 5rem auto;
+    grid-template-rows: 5rem minmax(0,1fr);
     column-gap: 2%;
     grid-template-areas: 'navbar' 'maincontent';
     height: 100vh;
@@ -16,8 +17,10 @@
         grid-template-columns: 8fr 2fr;
         display: grid;
         grid-template-areas: 'menuitem category';
-        grid-template-rows: 1fr;
+        grid-template-rows: 100%;
         grid-area: maincontent;
+        //max-height:100%;
+
         #menuitem {
             grid-area: menuitem;
         }
@@ -30,4 +33,5 @@
     .spinner {
         grid-area: maincontent;
     }
+
 }

src/views/Menu/MenuItemDisplay/MenuItemDisplay.scss

@@ -10,6 +10,7 @@
     border-radius: 50px;
     color: $onLight;
     @include body;
+    height: 100%;
 
     #pastry-img-div {
         width: 40%;
@@ -38,7 +39,12 @@
         width: 40%;
         height: 100%;
         display: grid;
-        grid-template-rows: 15% 5% 15% auto 15%;
+        gap:2%;
+        grid-template-rows: 15% 5% 15% 42% 15%;
+
+        & > *{
+            height:100%;
+        }
 
         h1 {
             @include menuitem;
@@ -55,11 +61,17 @@
         }
 
         #flavours {
+            display: flex;
+            flex-direction: column;
+
             div {
                 display: grid;
                 gap: 1rem;
                 grid-template-columns: 1fr 1fr;
                 grid-auto-rows: 4rem;
+                overflow:auto;
+                padding-right:1rem;
+
                 .flavour {
                     @include body;
                     box-shadow: $shadow 0 4px 16px -3px;

src/views/ProcessOrder/EnterCard/EnterCard.tsx

@@ -13,6 +13,14 @@ interface EnterCardProps {
     jwt: JWT;
 }
 
+export function restrictToNumbers(e:React.FormEvent<HTMLInputElement>) {
+    console.log("hi");
+
+    var value = e.currentTarget.value
+    console.log(value);
+    console.log(value.replace(/[^0-9]/g,''));
+}
+
 export default function EnterCard(props: EnterCardProps) {
     const [fields, updateFields] = ProcessOrderHooks.useFields();
     const [
@@ -87,6 +95,7 @@ export default function EnterCard(props: EnterCardProps) {
                         maxLength={19}
                         minLength={17}
                         required
+                        onInput={(e)=>restrictToNumbers(e)}
                         onChange={(e) =>
                             updateFields({
                                 cardNumber: e.currentTarget.value,

src/views/ShoppingCart/OrderSummary/OrderSummary.scss

@@ -6,9 +6,9 @@
     height: 100%;
     width: 100%;
     color: $onLight;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+    display: grid;
+    gap: 1rem;
+    grid-template-rows: 3rem 1fr min-content min-content;
     padding: 6.4rem 4rem 3rem 4rem;
 
     h1 {
@@ -24,8 +24,8 @@
     .total-line {
         display: grid;
         grid-template-columns: 3fr 1.5fr;
-        grid-auto-rows: 1fr;
-        row-gap: 0.5rem;
+        grid-auto-rows: 4rem;
+        row-gap: 0.8rem;
         align-items: flex-end;
 
         p:nth-child(2n + 1) {