From 923ab59c5152b93b329e75c1ef21a337a1540de9 Mon Sep 17 00:00:00 2001
From: lmerchant <lmerchant@ucsd.edu>
Date: Fri, 10 Jan 2025 17:17:12 -0800
Subject: [PATCH 1/2] style: add flex grid CSS to outer div of barcode buttons
 to enable wrapping

Make the div surrounding all the barcode buttons on the "My Kits" web page a
flex grid. Now all the buttons wrap and are responsive.

Fixes Issue #323
---
 microsetta_interface/templates/kits.jinja2 | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/microsetta_interface/templates/kits.jinja2 b/microsetta_interface/templates/kits.jinja2
index 1f776999..e60e4835 100644
--- a/microsetta_interface/templates/kits.jinja2
+++ b/microsetta_interface/templates/kits.jinja2
@@ -23,6 +23,11 @@
         .tooltip.bs-tooltip-top .tooltip-arrow::before {
             border-top-color: #0000ff !important;
         }
+        .new_kit_sample_container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
     </style>
     <script src="/static/vendor/js/jquery.form-4.2.2/jquery.form.min.js"></script>
     <script>

From 1e935aea69a15de654b16b697e9937b28c2274c4 Mon Sep 17 00:00:00 2001
From: Lynne Merchant <merchant.lynne@gmail.com>
Date: Mon, 27 Jan 2025 14:11:49 -0800
Subject: [PATCH 2/2] Move CSS out of kits.jinja2 template into
 minimal_interface.css

---
 microsetta_interface/static/css/minimal_interface.css | 5 ++++-
 microsetta_interface/templates/kits.jinja2            | 5 -----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/microsetta_interface/static/css/minimal_interface.css b/microsetta_interface/static/css/minimal_interface.css
index f365bf4a..39c6afcd 100644
--- a/microsetta_interface/static/css/minimal_interface.css
+++ b/microsetta_interface/static/css/minimal_interface.css
@@ -1210,6 +1210,7 @@ input.barcode-checkbox[type=checkbox]:checked+label {
 .new_kit_sample_container {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
     align-items: center;
     padding: 0px;
     gap: 16px;
@@ -1219,6 +1220,7 @@ input.barcode-checkbox[type=checkbox]:checked+label {
     .new_kit_sample_container {
         display: flex;
         flex-direction: column;
+        flex-wrap: wrap;
         align-items: center;
         padding: 0px;
         gap: 16px;
@@ -1581,6 +1583,7 @@ input.barcode-checkbox[type=checkbox]:checked+label {
     border-radius: 4px 4px 4px 4px;
     width: 240px;
 }
+
 @media (min-width: 1280px){
     .navbar-expand-custom {
         flex-direction: row;
@@ -1607,4 +1610,4 @@ input.barcode-checkbox[type=checkbox]:checked+label {
     .navbar-expand-custom .navbar-toggler {
         display: none;
     }
-}
\ No newline at end of file
+}
diff --git a/microsetta_interface/templates/kits.jinja2 b/microsetta_interface/templates/kits.jinja2
index e60e4835..1f776999 100644
--- a/microsetta_interface/templates/kits.jinja2
+++ b/microsetta_interface/templates/kits.jinja2
@@ -23,11 +23,6 @@
         .tooltip.bs-tooltip-top .tooltip-arrow::before {
             border-top-color: #0000ff !important;
         }
-        .new_kit_sample_container {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 10px;
-        }
     </style>
     <script src="/static/vendor/js/jquery.form-4.2.2/jquery.form.min.js"></script>
     <script>