Restructuring of components, extracting to reusable components, styling

src/styles/index.css

@@ -3050,6 +3050,42 @@ table {
   margin-left: 1px;
 }
 
+.max-h-xs {
+  max-height: 20rem;
+}
+
+.max-h-sm {
+  max-height: 30rem;
+}
+
+.max-h-md {
+  max-height: 40rem;
+}
+
+.max-h-lg {
+  max-height: 50rem;
+}
+
+.max-h-xl {
+  max-height: 60rem;
+}
+
+.max-h-2xl {
+  max-height: 70rem;
+}
+
+.max-h-3xl {
+  max-height: 80rem;
+}
+
+.max-h-4xl {
+  max-height: 90rem;
+}
+
+.max-h-5xl {
+  max-height: 100rem;
+}
+
 .max-h-full {
   max-height: 100%;
 }
@@ -7258,6 +7294,42 @@ table {
     margin-left: 1px;
   }
 
+  .sm\:max-h-xs {
+    max-height: 20rem;
+  }
+
+  .sm\:max-h-sm {
+    max-height: 30rem;
+  }
+
+  .sm\:max-h-md {
+    max-height: 40rem;
+  }
+
+  .sm\:max-h-lg {
+    max-height: 50rem;
+  }
+
+  .sm\:max-h-xl {
+    max-height: 60rem;
+  }
+
+  .sm\:max-h-2xl {
+    max-height: 70rem;
+  }
+
+  .sm\:max-h-3xl {
+    max-height: 80rem;
+  }
+
+  .sm\:max-h-4xl {
+    max-height: 90rem;
+  }
+
+  .sm\:max-h-5xl {
+    max-height: 100rem;
+  }
+
   .sm\:max-h-full {
     max-height: 100%;
   }
@@ -11451,6 +11523,42 @@ table {
     margin-left: 1px;
   }
 
+  .md\:max-h-xs {
+    max-height: 20rem;
+  }
+
+  .md\:max-h-sm {
+    max-height: 30rem;
+  }
+
+  .md\:max-h-md {
+    max-height: 40rem;
+  }
+
+  .md\:max-h-lg {
+    max-height: 50rem;
+  }
+
+  .md\:max-h-xl {
+    max-height: 60rem;
+  }
+
+  .md\:max-h-2xl {
+    max-height: 70rem;
+  }
+
+  .md\:max-h-3xl {
+    max-height: 80rem;
+  }
+
+  .md\:max-h-4xl {
+    max-height: 90rem;
+  }
+
+  .md\:max-h-5xl {
+    max-height: 100rem;
+  }
+
   .md\:max-h-full {
     max-height: 100%;
   }
@@ -15644,6 +15752,42 @@ table {
     margin-left: 1px;
   }
 
+  .lg\:max-h-xs {
+    max-height: 20rem;
+  }
+
+  .lg\:max-h-sm {
+    max-height: 30rem;
+  }
+
+  .lg\:max-h-md {
+    max-height: 40rem;
+  }
+
+  .lg\:max-h-lg {
+    max-height: 50rem;
+  }
+
+  .lg\:max-h-xl {
+    max-height: 60rem;
+  }
+
+  .lg\:max-h-2xl {
+    max-height: 70rem;
+  }
+
+  .lg\:max-h-3xl {
+    max-height: 80rem;
+  }
+
+  .lg\:max-h-4xl {
+    max-height: 90rem;
+  }
+
+  .lg\:max-h-5xl {
+    max-height: 100rem;
+  }
+
   .lg\:max-h-full {
     max-height: 100%;
   }
@@ -19837,6 +19981,42 @@ table {
     margin-left: 1px;
   }
 
+  .xl\:max-h-xs {
+    max-height: 20rem;
+  }
+
+  .xl\:max-h-sm {
+    max-height: 30rem;
+  }
+
+  .xl\:max-h-md {
+    max-height: 40rem;
+  }
+
+  .xl\:max-h-lg {
+    max-height: 50rem;
+  }
+
+  .xl\:max-h-xl {
+    max-height: 60rem;
+  }
+
+  .xl\:max-h-2xl {
+    max-height: 70rem;
+  }
+
+  .xl\:max-h-3xl {
+    max-height: 80rem;
+  }
+
+  .xl\:max-h-4xl {
+    max-height: 90rem;
+  }
+
+  .xl\:max-h-5xl {
+    max-height: 100rem;
+  }
+
   .xl\:max-h-full {
     max-height: 100%;
   }