ok

src/index.css

@@ -5,9 +5,94 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
+  background-color: #e9e9e9;
+  position: relative;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+/* Ensure proper scrolling behavior */
+html, body {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+#root {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* Ensure proper z-index stacking */
+* {
+  z-index: auto;
+}
+
+/* Responsive design adjustments */
+@media (max-width: 768px) {
+  body {
+    font-size: 14px;
+  }
+  
+  .container {
+    max-height: 75vh; /* Menaikkan tinggi maksimum pada mobile */
+  }
+  
+  .materialCard {
+    margin-bottom: 12px;
+  }
+  
+  .materialSummary {
+    padding: 14px 16px;
+  }
+  
+  .materialName {
+    font-size: 15px;
+  }
+  
+  .materialStock {
+    font-size: 13px;
+    margin-right: 12px;
+  }
+  
+  .detailGrid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+  
+  .formGrid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+  
+  /* Memastikan MaterialList tetap dapat di-scroll */
+  .MaterialList-module__container {
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+}