1. View, filter, and save Product Permutation. \n 2. Synchronised with Product Category page and all common functionality moved into base and base table css, js, and python files.

static/css/main.css

@@ -1,5 +1,5 @@
 
-/*
+
 /* Base styles *
 @import 'lib/reset.css';
 @import 'lib/typography.css';
@@ -9,6 +9,7 @@
 /* Layout styles *
 @import 'layouts/header.css';
 @import 'layouts/footer.css';
+@import 'layouts/table-main.css';
 
 /* Component styles *
 @import 'components/button.css';
@@ -21,6 +22,7 @@
 
 /* Section styles *
 @import 'sections/store.css';
+*/
 
 /* Page-specific styles *
 @import 'pages/page_admin.css';
@@ -31,15 +33,14 @@
 @import 'pages/page_store_home.css';
 @import 'pages/page_store_product_permutations.css';
 @import 'pages/page_store_stock_items.css';
-*
+*/
 
 /* Theme styles *
 @import 'themes/light.css';
-/* Uncomment the line below to enable dark theme *
-/* @import 'themes/dark.css'; *
+/* Uncomment the line below to enable dark theme */
+/* @import 'themes/dark.css'; */
 
 
-*/
 
 /* Custom styles */
 /* Add any custom styles or overrides here */
@@ -234,10 +235,9 @@ h5 {
     text-align: center;
     width: 100%;
     align-self: center;
-    font-size: min(20px, calc(1vh * 6));
+    font-size: min(16px, calc(1vh * 4));
 }
 #pageBody > * > * {
-    width: 100%;
     align-self: center;
     padding-top: 1vh;
     padding-bottom: 1vh;
@@ -374,6 +374,7 @@ img.header-logo {
     display: flex;
     flex-direction: column;
     align-items: center;
+    margin: auto 0;
 }
 
 .row {
@@ -521,10 +522,10 @@ button:hover, input[type="submit"]:hover, #overlayHamburger .row *:hover {
     z-index: 999;
 }
 .overlay.expanded {
-    display: block !important;
+    display: block;
 }
 .collapsed {
-    display: none !important;
+    display: none;
 }
 
 #overlayHamburger {
@@ -593,39 +594,5 @@ td.dirty {
 
 /* Tables */
 #pageBody > *, button {
-    font-size: min(14px, calc(1vh * 5)) !important;
-}
-thead, tbody {
-    padding-top: 0px !important;
-    padding-bottom: 0px !important;
-}
-
-th {
-    
-}
-td {
-    font-size: min(14px, calc(1vh * 5));
-}
-
-th, td {
-    min-width: fit-content;
-}
-tr:not(:last-child) > td {
-    border-bottom: 1px dashed var(--c_purple_dark);
-}
-td > table > tbody > tr > td {
-    border: none !important;
-}
-tr {
-    min-height: 1px;
-    border-bottom: 1px solid var(--c_purple_dark);
-    border-top: 1px solid var(--c_purple_dark);
-    padding-bottom: 1vh;
-    background-color: transparent;
-}
-
-/*
-.row-new {
-    visibility: hidden;
-}
-*/
+    font-size: min(12px, calc(1vh * 3));
+}