ok

src/components/ItemLister.module.css

@@ -2,80 +2,78 @@
 
 .item-lister {
   width: 100%;
-  padding: 10px; /* Adjust padding as needed */
-  box-sizing: border-box; /* Ensure padding doesn't affect width */
+  padding: 10px; /* Slightly reduced padding */
+  box-sizing: border-box;
   white-space: break-spaces;
 }
 
 .fullscreen {
-  position: fixed; /* Keep the container fixed */
-  top: 0; /* Adjust the top position as needed */
-  bottom: 0; /* Occupy the full height of the viewport */
-  left: 0; /* Align to the left */
-  right: 0; /* Align to the right */
-  background-color: white; /* Background color */
-  z-index: 1000; /* Layering */
-  overflow-y: auto; /* Allow vertical scrolling */
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: white;
+  z-index: 1000;
+  overflow-y: auto;
 }
+
 .grid-container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
-  /* padding: 10px; */
-  /* max-height: calc(3 * (25vw - 20px) + 20px); */
-  overflow-y: auto;
-  height: calc(49vw - 20px);
+  height: calc(50vw - 20px);
 }
 
 @media (min-height: 0px) {
   .grid-container {
-    height: 27vh;
+    height: 28vh;
   }
 }
 @media (min-height: 630px) {
   .grid-container {
-    height: 27vh;
+    height: 28vh;
   }
 }
 @media (min-height: 636px) {
   .grid-container {
-    height: 29vh;
+    height: 30vh;
   }
 }
 @media (min-height: 650px) {
   .grid-container {
-    height: 34vh;
+    height: 36vh;
   }
 }
 @media (min-height: 705px) {
   .grid-container {
-    height: 37vh;
+    height: 39vh;
   }
 }
 @media (min-height: 735px) {
   .grid-container {
-    height: 38vh;
+    height: 40vh;
   }
 }
 @media (min-height: 759px) {
   .grid-container {
-    height: 40vh;
+    height: 42vh;
   }
 }
 @media (min-height: 819px) {
   .grid-container {
-    height: 44vh;
+    height: 46vh;
   }
 }
 
 @media (min-height: 830px) {
   .grid-container {
-    height: 47vh;
+    height: 49vh;
   }
 }
 @media (min-height: 892px) {
   .grid-container {
-    height: 49vh;
+    height: 51vh;
   }
 }
 
@@ -83,6 +81,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 12px 16px; /* Added padding for better spacing */
+  background-color: #f8f9fa; /* Light background for better visual separation */
+  border-radius: 12px; /* Rounded corners */
+  margin-bottom: 16px; /* Space below the title container */
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Subtle shadow */
 }
 
 .titleActions {
@@ -100,7 +103,7 @@
   border: 1px solid #e6e6e6;
   background: #ffffff;
   color: #2d2d2d;
-  border-radius: 8px; /* square rounded */
+  border-radius: 8px;
   cursor: pointer;
 }
 .iconBtn:disabled {
@@ -114,21 +117,21 @@
 
 .title {
   background-color: transparent;
-    font-family: "Plus Jakarta Sans", sans-serif;
-    font-weight: 500;
-    font-style: normal;
-    font-size: 20px;
-    color: rgba(88, 55, 50, 1);
-    text-align: left;
-    width: calc(70% - 10px);
-    padding-left: 10px;
-    text-transform: capitalize;
+  font-family: "Plus Jakarta Sans", sans-serif;
+  font-weight: 600; /* Increased font weight for better visibility */
+  font-style: normal;
+  font-size: 20px;
+  color: rgba(88, 55, 50, 1);
+  text-align: left;
+  width: calc(70% - 10px);
+  padding-left: 10px;
+  text-transform: capitalize;
 }
 
 .edit-typeItem-button {
-  margin-left: auto; /* Push the button to the right */
-  padding: 8px 16px; /* Adjust padding as needed */
-  font-size: 14px;
+  margin-left: auto;
+  padding: 6px 12px;
+  font-size: 13px;
   background-color: #007bff;
   color: #fff;
   border: none;
@@ -138,8 +141,8 @@
 
 .add-item-button {
   margin-top: 10px;
-  padding: 8px 16px; /* Adjust padding as needed */
-  font-size: 14px;
+  padding: 6px 12px;
+  font-size: 13px;
   background-color: #359d42d1;
   color: #fff;
   border: none;
@@ -149,7 +152,24 @@
 
 .item-list {
   display: flex;
-  flex-direction: column; /* Display items in a column */
+  flex-direction: column;
+}
+
+/* Grid layout for portrait cards on cafe page */
+.item-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+}
+@media (min-width: 600px) {
+  .item-grid {
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  }
+}
+@media (min-width: 992px) {
+  .item-grid {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  }
 }
 
 .border {
@@ -168,13 +188,13 @@
   z-index: 100;
   background-color: #0000008c;
   width: 100%;
-  top: 7px;
+  top: 6px;
   bottom: -4px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  font-size: 14px;
+  font-size: 13px;
 }
 
 .PaymentOption {
@@ -252,3 +272,24 @@
   color: black;
   text-align: left;
 }
+
+/* Harga dalam item list - dikurangi ukurannya agar proporsional */
+.itemPriceList {
+  font-family: "Plus Jakarta Sans", sans-serif;
+  font-weight: 700;
+  font-size: 14px;
+  color: #1c1d1d;
+  margin: 2px 0;
+  white-space: nowrap;
+}
+
+.itemPriceList.promo {
+  color: #e53935;
+  font-size: 13px;
+}
+
+.itemPriceList.original {
+  color: #727272;
+  font-size: 12px;
+  text-decoration: line-through;
+}