Merge remote-tracking branch 'origin/main'

src/pages/menu/components/MenuList/MenuList.module.css

@@ -54,13 +54,17 @@
 }
 
 @media (min-width: 1025px) {
+  .menuSections{
+    padding: 0;
+  }
+
   .menuSection h3 {
     margin: 50px 0px 25px 0px;
     font-size: 28px;
   }
 
   .menuItemsGrid {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(2, 1fr);
     gap: 20px;
     margin-bottom: 24px;
   }
@@ -69,6 +73,7 @@
 /* Enhanced responsive menu items grid */
 @media (min-width: 1280px) {
   .menuItemsGrid {
+    display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
     margin-bottom: 28px;
@@ -185,13 +190,13 @@
 /* Enhanced responsive page container */
 @media (min-width: 769px) and (max-width: 1024px) {
   .pageContainer {
-    padding: 24px;
+    padding: 0 24px;
   }
 }
 
 @media (min-width: 1025px) {
   .pageContainer {
-    padding: 32px;
+    padding: 0 32px;
     max-width: 1200px;
     margin: 0 auto;
   }

src/pages/menu/menu.module.css

@@ -109,55 +109,6 @@
 } */
 
 /* Enhanced responsive item description */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .itemDescription {
-    font-size: 14px !important;
-  }
-  .logo {
-    left: 40px;
-    width: 80px !important;
-    height: 80px !important;
-  }
-
-  .cover {
-    width: 100%;
-    height: "auto";
-    object-fit: cover;
-  }
-  .restaurantHeader {
-    margin-bottom: 0px;
-  }
-
-  .leftShape {
-    top: 170px;
-    left: -3px;
-
-  }
-
-  .rightShape {
-    top: 170px;
-    left:116px
-  }
-}
-
-@media (min-width: 1025px) {
-  .itemDescription {
-    font-size: 16px !important;
-  }
-  /* .logo {
-    display: none !important;
-  } */
-  .restaurantHeader {
-    margin-bottom: 0px;
-  }
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-}
-
-@media (min-width: 769px) and (max-width: 1024px) {
-}
 
 .pageContainer {
   padding: 0;
@@ -165,21 +116,6 @@
   background-color: "#F7F7F7";
 }
 
-/* Enhanced responsive page container */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .pageContainer {
-    padding: 16px;
-  }
-}
-
-@media (min-width: 1025px) {
-  .pageContainer {
-    padding: 32px;
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-}
-
 /* Sidebar state adjustments */
 .sidebarCollapsed .pageContainer {
   margin-left: 80px;
@@ -189,13 +125,6 @@
   margin-left: 200px;
 }
 
-@media (max-width: 768px) {
-  .sidebarCollapsed .pageContainer,
-  .sidebarExpanded .pageContainer {
-    margin-left: 0;
-  }
-}
-
 :global(.darkApp) .restaurantHeader path {
   fill: none !important;
   stroke: #ffffff !important;
@@ -428,72 +357,12 @@
   border-radius: 0 0 16px 16px;
 }
 
-@media (min-width: 769px) and (max-width: 1024px) {
-  .restaurantHeader {
-    border-radius: 0 0 20px 20px;
-    /* box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); */
-  }
-}
-
-@media (min-width: 1025px) {
-  .restaurantHeader {
-    border-radius: 0 0 24px 24px;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
-  }
-}
-
-/* Enhanced responsive restaurant logo */
-/* .restaurantLogo {
-  transition: all 0.3s ease;
-} */
-
-@media (min-width: 769px) and (max-width: 1024px) {
-  .restaurantLogo {
-    width: 96px !important;
-    height: 96px !important;
-    border-radius: 12px !important;
-  }
-}
-
-@media (min-width: 1025px) {
-  .restaurantLogo {
-    width: 120px !important;
-    height: 120px !important;
-    border-radius: 16px !important;
-  }
-}
-
 /* Enhanced responsive navigation buttons */
 .navButton {
   transition: all 0.3s ease;
 }
 
-@media (min-width: 769px) and (max-width: 1024px) {
-  .navButton {
-    width: 40px !important;
-    height: 40px !important;
-    border-radius: 12px !important;
-  }
-}
-
-@media (min-width: 1025px) {
-  .navButton {
-    width: 48px !important;
-    height: 48px !important;
-    border-radius: 16px !important;
-  }
-}
-
 /* Enhanced responsive animations */
-@media (prefers-reduced-motion: no-preference) {
-  .pageContainer {
-    animation: fadeInUp 0.6s ease-out;
-  }
-
-  /* .restaurantHeader {
-    animation: fadeInDown 0.8s ease-out;
-  } */
-}
 
 @keyframes fadeInUp {
   from {
@@ -525,30 +394,7 @@
   outline-offset: 2px;
 }
 
-@media (min-width: 768px) {
-  .pageContainer:focus,
-  .restaurantHeader:focus,
-  .navButton:focus {
-    outline-offset: 4px;
-  }
-}
-
 /* Enhanced responsive print styles */
-@media print {
-  .pageContainer {
-    background-color: white !important;
-    color: black !important;
-  }
-
-  .restaurantHeader {
-    box-shadow: none !important;
-    border: 1px solid #ccc !important;
-  }
-
-  .navButton {
-    display: none !important;
-  }
-}
 
 .dineInIcon {
   position: relative;
@@ -665,3 +511,149 @@
 .restaurantDescriptionSkeleton .ant-skeleton-content .ant-skeleton-paragraph {
   margin-block-start: 8px !important;
 }
+
+/* ===== AGGREGATED MEDIA QUERIES ===== */
+
+/* Mobile devices (max-width: 768px) */
+@media (max-width: 768px) {
+  .sidebarCollapsed .pageContainer,
+  .sidebarExpanded .pageContainer {
+    margin-left: 0;
+  }
+}
+
+/* Tablet devices (min-width: 769px and max-width: 1024px) */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .itemDescription {
+    font-size: 14px !important;
+  }
+
+  .logo {
+    left: 40px;
+    width: 80px !important;
+    height: 80px !important;
+  }
+
+  .cover {
+    width: 100%;
+    height: "auto";
+    object-fit: cover;
+  }
+
+  .restaurantHeader {
+    margin-bottom: 0px;
+    border-radius: 0 0 20px 20px;
+  }
+
+  .leftShape {
+    top: 170px;
+    left: -3px;
+  }
+
+  .rightShape {
+    top: 170px;
+    left: 116px;
+  }
+
+  .pageContainer {
+    padding: 16px;
+  }
+
+  .restaurantLogo {
+    width: 96px !important;
+    height: 96px !important;
+    border-radius: 12px !important;
+  }
+
+  .navButton {
+    width: 40px !important;
+    height: 40px !important;
+    border-radius: 12px !important;
+  }
+}
+
+/* Desktop devices (min-width: 1025px) */
+@media (min-width: 1025px) {
+  .contentWrapper {
+    max-width: 1164px;
+  }
+
+  .itemDescription {
+    font-size: 16px !important;
+  }
+
+  .restaurantHeader {
+    margin-bottom: 0px;
+    border-radius: 0 0 24px 24px;
+  }
+
+  .pageContainer {
+    padding: 16px 32px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .logo {
+    position: absolute;
+    left: 33px;
+    top: -95px;
+    border-radius: 50%;
+    z-index: 10;
+    border: 3px solid var(--background);
+    width: 150px !important;
+    height: 150px !important;
+  }
+
+  .navButton {
+    width: 48px !important;
+    height: 48px !important;
+    border-radius: 16px !important;
+  }
+
+  .leftShape {
+    top: 170px;
+    left: -10px;
+  }
+
+  .rightShape {
+    top: 170px;
+    left: 179px;
+  }
+}
+
+/* Large screens (min-width: 768px) */
+@media (min-width: 768px) {
+  .pageContainer:focus,
+  .restaurantHeader:focus,
+  .navButton:focus {
+    outline-offset: 4px;
+  }
+}
+
+/* Reduced motion preference */
+@media (prefers-reduced-motion: no-preference) {
+  .pageContainer {
+    animation: fadeInUp 0.6s ease-out;
+  }
+
+  /* .restaurantHeader {
+    animation: fadeInDown 0.8s ease-out;
+  } */
+}
+
+/* Print styles */
+@media print {
+  .pageContainer {
+    background-color: white !important;
+    color: black !important;
+  }
+
+  .restaurantHeader {
+    box-shadow: none !important;
+    border: 1px solid #ccc !important;
+  }
+
+  .navButton {
+    display: none !important;
+  }
+}