types column layout vs grid

Author: thejonroberts

app/assets/stylesheets/base/variables.scss

@@ -10,4 +10,5 @@ $sidebar-dark: #1A2142;
   --dark: #262d3f; 
   --gray: #5d657b;
   --silver: #D9D9D9;
+  --inactive: #9AA4CA;
 }

app/assets/stylesheets/pages/case_contacts_form.scss

@@ -1,41 +1,52 @@
 @use "../base/breakpoints.scss" as screen-sizes;
 
 #case-contact-form {
-  #contact-form-types {
-    display: grid;
-    grid-template-columns: 1fr;
-  }
+  & #contact-form-types {
+    --group-width: 250px;
 
-  @media only screen and (min-width: screen-sizes.$small) {
-    #contact-form-types {
-      grid-template-columns: 1fr 1fr;
-    }
-  }
+    columns: var(--group-width);
 
-  @media only screen and (min-width: screen-sizes.$medium) {
-    #contact-form-types {
-      grid-template-columns: 1fr 1fr 1fr;
+    & fieldset {
+      display: inline-block;
+      width: var(--group-width);
+      padding: .25rem;
+
+      & legend {
+        color: var(--inactive);
+      }
+
+      & .form-check {
+        padding-left: .25rem;
+
+        & input {
+          float: none;
+        }
+
+        & label {
+          display: inline;
+        }
+      }
     }
   }
 
-  .input-group-text {
+  & .input-group-text {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  h2 {
+  & h2 {
     font-size: 28px;
   }
 
-  h3 {
+  & h3 {
     font-size: medium;
   }
 
-  legend {
+  & legend {
     font-size: medium;
   }
 
-  #contact-form-action-buttons {
+  & #contact-form-action-buttons {
     display: flex;
     justify-content: flex-end;
     gap: 10px;

app/views/case_contacts/form/details.html.erb

@@ -66,12 +66,12 @@
       <h3>Contact Type(s)<span class="red-letter">*</span></h3>
       <div id="contact-form-types" class="mb-3">
         <% @grouped_contact_types.each do |group_name, contact_types| %>
-          <fieldset class="form-group p-2">
+          <fieldset class="form-group">
             <legend><%= group_name %></legend>
             <%= form.collection_check_boxes(:contact_type_ids, contact_types, :id, :name) do |b| %>
-              <div class="form-check ps-1">
+              <div class="form-check">
                 <%= b.check_box(class: ["form-check-input", "contact-form-type-checkbox", "ms-1"]) %>
-                <%= b.label(class: "form-check-label ps-2") %>
+                <%= b.label(class: "form-check-label") %>
               </div>
             <% end %>
           </fieldset>