fix: un-pairing ui not responsive

CSS Modules compose rules in @media does not respect query. So, pull the @media query into Mfa.module.css, thus no need to compose. This means c-step-panels leaves message and responsive layout to client. css-modules/css-modules#75
TACC · Sep 6, 2023 · 2555d23 · 2555d23
1 parent 228c1ac
commit 2555d23
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 86 deletions.
diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css
@@ -2,9 +2,9 @@
 
 /* Layout styles */
 .pairing-container {
-    --extra-space-below-panel-for-message: 50px; /* text copy input height ++ */
+    composes: c-step-panels from '../../styles/c-step-panels.css';
 
-    composes: c-step-panels c-step-panels--has-scroll-parent from '../../styles/c-step-panels.css';
+    padding-bottom: var(--global-space--section-bottom);
 }
 
 .pairing-container > *:not(.pairing-separator) {
@@ -59,17 +59,6 @@ label.qr-code-alt-label {
 }
 
 
-/* Wide */
-@media screen and (--medium-and-above) {
-    .pairing-container {
-        composes: c-step-panels--horizontal from '../../styles/c-step-panels.css';
-    }
-    .mfa-message {
-        composes: c-step-panels__message from '../../styles/c-step-panels.css';
-    }
-}
-
-
 
 .mfa-form {
     composes: c-step-panels__content from '../../styles/c-step-panels.css';
@@ -90,3 +79,60 @@ label.qr-code-alt-label {
 .mfa-success-container button {
     margin-top: 30px; /* match .mfa-type-selection */
 }
+
+
+
+/* Responsive layout */
+@media screen and (--medium-and-above) {
+    .pairing-container {
+        /* To layout items on one left-aligned row */
+        grid-auto-flow: column;
+        justify-content: start;
+
+        /* To support `position: absolute` child */
+        position: relative;
+        width: max-content; /* to not let wide child change parent width */
+    }
+
+    /* HACK: Add extra space to hold the .mfa-message "outside" of the panels */
+    .pairing-container {
+        --space-below-panel-before-message: var(--global-space--section-bottom);
+        --space-below-panel-for-form-field: 50px; /* text copy input height++ */
+
+        /* FAQ: body font-size * body line-height + button vert. border + … */
+        padding-bottom: calc(
+            var(--global-font-size--small) * 1.4
+            + (var(--global-border-width--normal) * 2)
+            + var(--space-below-panel-for-form-field)
+            + var(--space-below-panel-before-message)
+        );
+    }
+
+    /* HACK: Position .mfa-message at the bottom and "outside" of the panels */
+    .pairing-container *:not(:only-child) .mfa-message {
+        /* To position message beneath both paring steps */
+        position: absolute;
+        top: calc(
+            100%
+            - var(--space-below-panel-for-message)
+            + var(--space-below-panel-before-message)
+        );
+
+        /* To stretch content */
+        width: max-content;
+        max-width: calc(
+          100%
+          - var(--global-space--section-left)
+          - var(--global-space--section-right)
+        );
+
+        /* To horizontally center content (not text) */
+        left: 0;
+        right: 0;
+        margin-left: auto;
+        margin-right: auto;
+
+        /* To horizontally center text (not content) */
+        text-align: center;
+    }
+}
diff --git a/libs/tup-components/styles/c-step-panels.css b/libs/tup-components/styles/c-step-panels.css
@@ -3,30 +3,11 @@
 .c-step-panels {
     display: grid;
     padding-inline: var(--global-space--section-left);
-    padding-bottom: var(--global-space--section-bottom);
     gap: var(--global-space--section-left);
-
-    --space-below-panel-before-message: var(--global-space--section-bottom);
-    --extra-space: var(--extra-space-below-panel-for-message, 0px);
-
-    /* FAQ: body font-size * body line-height + button vert. border + extra … */
-    --space-below-panel-for-message: calc(
-        var(--global-font-size--small)
-        * 1.4
-        + (var(--global-border-width--normal) * 2)
-        + var(--extra-space)
-        + var(--space-below-panel-before-message)
-    )
 }
 ol.c-step-panels {
     margin-bottom: 0; /* overwrite core-styles.base.css */
 }
-/* HACK: Add space for c-step-panels__message to avoid causing scrollbar */
-.c-step-panels--has-scroll-parent {
-    padding-bottom: var(--space-below-panel-for-message);
-}
-
-
 
 
 
@@ -40,64 +21,12 @@ li.c-step-panels__separator {
 }
 
 /* To add space between "2." and separator */
-.c-step-panels__separator + li {
+.c-step-panels__separator {
     /* This assumes `list-style-position: outside` (browser default) */
-    margin-left: 1.25em;
+    margin-right: 1.25em;
 }
 
 .c-step-panels__content {
     padding-top: 10px;
     padding-bottom: 10px;
 }
-
-
-
-
-
-/* Modifiers */
-
-/* Modifiers: Vertical */
-
-.c-step-panels--vertical {
-    /* no extra styles required yet */
-}
-
-
-
-/* Modifiers: Horizontal */
-
-.c-step-panels--horizontal {
-    /* To layout items on one left-aligned row */
-    grid-auto-flow: column;
-    justify-content: start;
-
-    /* To support `position: absolute` child */
-    position: relative;
-    width: max-content; /* to not let wide child change parent width */
-}
-.c-step-panels--horizontal li:not(:only-child) .c-step-panels__message {
-    /* To position message beneath both paring steps */
-    position: absolute;
-    top: calc(
-        100%
-        - var(--space-below-panel-for-message)
-        + var(--space-below-panel-before-message)
-    );
-
-    /* To stretch content */
-    width: max-content;
-    max-width: calc(
-      100%
-      - var(--global-space--section-left)
-      - var(--global-space--section-right)
-    );
-
-    /* To horizontally center content (not text) */
-    left: 0;
-    right: 0;
-    margin-left: auto;
-    margin-right: auto;
-
-    /* To horizontally center text (not content) */
-    text-align: center;
-}