Switch to a panel based UI, fix #552

css/index-tailwind-output.css

@@ -728,10 +728,6 @@ video {
   margin: 0.25rem;
 }
 
-.m-2 {
-  margin: 0.5rem;
-}
-
 .m-4 {
   margin: 1rem;
 }
@@ -740,6 +736,10 @@ video {
   margin: 1.25rem;
 }
 
+.m-2 {
+  margin: 0.5rem;
+}
+
 .m-0\.5 {
   margin: 0.125rem;
 }
@@ -799,14 +799,6 @@ video {
   margin-top: 1rem;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
-}
-
-.mr-1 {
-  margin-right: 0.25rem;
-}
-
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -847,6 +839,10 @@ video {
   margin-bottom: 2.5rem;
 }
 
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
 .mt-0 {
   margin-top: 0px;
 }
@@ -855,6 +851,10 @@ video {
   margin-top: 2rem;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -956,10 +956,6 @@ video {
   height: 3rem;
 }
 
-.h-8 {
-  height: 2rem;
-}
-
 .h-4 {
   height: 1rem;
 }
@@ -980,6 +976,10 @@ video {
   height: 1.5rem;
 }
 
+.h-8 {
+  height: 2rem;
+}
+
 .h-32 {
   height: 8rem;
 }
@@ -1004,10 +1004,6 @@ video {
   height: 12rem;
 }
 
-.max-h-7 {
-  max-height: 1.75rem;
-}
-
 .max-h-20vh {
   max-height: 20vh;
 }
@@ -1020,6 +1016,10 @@ video {
   max-height: 1rem;
 }
 
+.max-h-7 {
+  max-height: 1.75rem;
+}
+
 .max-h-8 {
   max-height: 2rem;
 }
@@ -1048,14 +1048,6 @@ video {
   width: 3rem;
 }
 
-.w-8 {
-  width: 2rem;
-}
-
-.w-1\/3 {
-  width: 33.333333%;
-}
-
 .w-4 {
   width: 1rem;
 }
@@ -1072,6 +1064,10 @@ video {
   width: 2.75rem;
 }
 
+.w-8 {
+  width: 2rem;
+}
+
 .w-min {
   width: -webkit-min-content;
   width: min-content;
@@ -1216,6 +1212,10 @@ video {
   place-content: center;
 }
 
+.content-center {
+  align-content: center;
+}
+
 .content-start {
   align-content: flex-start;
 }
@@ -1317,14 +1317,14 @@ video {
   border-radius: 9999px;
 }
 
-.rounded {
-  border-radius: 0.25rem;
-}
-
 .rounded-3xl {
   border-radius: 1.5rem;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -1346,14 +1346,14 @@ video {
   border-bottom-left-radius: 0.25rem;
 }
 
-.border-2 {
-  border-width: 2px;
-}
-
 .border {
   border-width: 1px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-4 {
   border-width: 4px;
 }
@@ -1414,11 +1414,6 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-gray-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
 .bg-red-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 113 113 / var(--tw-bg-opacity));
@@ -1439,6 +1434,11 @@ video {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1565,6 +1565,10 @@ video {
   padding-top: 0.125rem;
 }
 
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
 .pl-6 {
   padding-left: 1.5rem;
 }
@@ -2555,14 +2559,14 @@ input {
     margin-right: auto;
   }
 
-  .sm\:mr-2 {
-    margin-right: 0.5rem;
-  }
-
   .sm\:mt-5 {
     margin-top: 1.25rem;
   }
 
+  .sm\:mr-2 {
+    margin-right: 0.5rem;
+  }
+
   .sm\:flex {
     display: flex;
   }
@@ -2700,6 +2704,10 @@ input {
     height: 3rem;
   }
 
+  .md\:w-1\/3 {
+    width: 33.333333%;
+  }
+
   .md\:w-2\/6 {
     width: 33.333333%;
   }

css/mobile.css

@@ -8,10 +8,6 @@ Contains tweaks for small screens
         display: none !important;
     }
 
-    .desktop\:max-h-65vh {
-        max-height: 65vh;
-    }
-
 }