💄 [#1436] Added scroll styles for tables on mobile and iOS

maykinmedia · Jun 5, 2023 · bb39087 · bb39087
1 parent 5f78ccb
commit bb39087
Showing 1 changed file with 28 additions and 0 deletions.
diff --git a/src/open_inwoner/scss/components/Table/Table.scss b/src/open_inwoner/scss/components/Table/Table.scss
@@ -1,9 +1,16 @@
 .table {
+  display: block;
+  box-sizing: border-box;
+  white-space: nowrap;
   margin-top: var(--row-height);
   width: 100%;
   font-family: var(--font-family-body);
   border-collapse: collapse;
   border-spacing: 0;
+  overflow-x: scroll;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-secondary) var(--color-gray-lightest);
+  -webkit-overflow-scrolling: touch;
 
   &--space-medium {
     margin-top: var(--spacing-medium);
@@ -147,4 +154,25 @@
       font-size: var(--font-size-body);
     }
   }
+
+  @media (min-width: 768px) {
+    display: table;
+  }
+}
+
+/// Scrollbar style for tables on mobile
+
+.table::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.table::-webkit-scrollbar-track {
+  background: var(--color-gray-lightest);
+}
+
+.table::-webkit-scrollbar-thumb {
+  background-color: var(--color-secondary);
+  border-radius: 6px;
+  border: 2px solid var(--color-secondary);
 }