Update hypha-grid--two

Author: theskumar

hypha/static_src/sass/components/_hypha-grid.scss

@@ -1,76 +1,48 @@
 @use "../abstracts/mixins";
 
-.hypha-grid {
-  display: grid;
-  margin-block-end: 1rem;
-  gap: calc(var(--spacing) * 2);
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-
-  &--two {
-    grid-template-columns: 100%;
-
-    @include mixins.media-query(md) {
-      grid-template-columns: 1fr 1fr;
-    }
-
-    &.delete {
-      grid-template-columns: 1fr;
+@layer utilities {
+  .hypha-grid {
+    display: grid;
+    margin-block-end: 1rem;
+    gap: calc(var(--spacing) * 2);
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+
+    &--narrow {
+      text-align: center;
+
+      @include mixins.media-query(md) {
+        text-align: start;
+      }
     }
 
-    .form--comments & {
-      margin: 20px 0 0;
+    &--proposal-info {
+      grid-template-columns: 100%;
       gap: 10px;
-      grid-template-columns: 100px 100px;
-    }
-
-    .wrapper--comments & {
-      grid-template-columns: 1fr;
-    }
-
-    + br {
-      display: none;
-    }
-  }
-
-  &--narrow {
-    text-align: center;
-
-    @include mixins.media-query(md) {
-      text-align: start;
-    }
-  }
-
-  &--no-margin {
-    margin: 0;
-  }
+      margin: 0 0 1rem;
 
-  &--proposal-info {
-    grid-template-columns: 100%;
-    gap: 10px;
-    margin: 0 0 1rem;
+      @include mixins.media-query(sm) {
+        margin: 0 0 1.5rem;
+        grid-template-columns: 1fr 1fr;
+      }
 
-    @include mixins.media-query(sm) {
-      margin: 0 0 1.5rem;
-      grid-template-columns: 1fr 1fr;
+      * {
+        margin: 0;
+      }
     }
 
-    * {
-      margin: 0;
-    }
-  }
-
-  &--status-update {
-    grid-template-columns: 100%;
-
-    @include mixins.media-query(sm) {
+    &--status-update {
       grid-template-columns: 100%;
-    }
-  }
 
-  &__cell {
-    &--span-two {
       @include mixins.media-query(sm) {
-        grid-column: auto / span 2;
+        grid-template-columns: 100%;
+      }
+    }
+
+    &__cell {
+      &--span-two {
+        @include mixins.media-query(sm) {
+          grid-column: auto / span 2;
+        }
       }
     }
   }

hypha/templates/base.html

@@ -24,8 +24,8 @@
         <link rel="mask-icon" href="{% static 'images/favicons/safari-pinned-tab.svg' %}" color="#5bbad5">
         <link rel="shortcut icon" href="{% static 'images/favicons/favicon.ico' %}">
 
-        <link rel="stylesheet" href="{% static 'css/tailwind-output.css' %}">
         <link rel="stylesheet" href="{% static 'css/main.css' %}">
+        <link rel="stylesheet" href="{% static 'css/tailwind-output.css' %}">
         <!-- Needed for most forms so load it here once. -->
         <link rel="stylesheet" href="{% static 'file_form/file_form.css' %}">
         {{ form.media.css }}

hypha/templates/django/forms/widgets/multiple_input.html

@@ -1,6 +1,6 @@
 {% with id=widget.attrs.id %}
   <ul
-    class="mb-0! hypha-grid hypha-grid--two {% if widget.attrs.class %} {{ widget.attrs.class }} {% endif %}"
+    class="grid grid-cols-1 sm:grid-cols-2 gap-2 {% if widget.attrs.class %} {{ widget.attrs.class }} {% endif %}"
     {% if id %} id="{{ id }}"{% endif %}
   >
     {% for group, options, index in widget.optgroups %}
@@ -15,4 +15,5 @@
         </li>
       {% endif %}
     {% endfor %}
-  </ul>{% endwith %}
+  </ul>
+{% endwith %}