TUP-689 On Small Screen, Stack Manage Account Blocks into 1 Column (#428

) * adds dynamic account management screen * make device agnostic * remove unnecessary span. adjust media query.
TACC · Feb 20, 2024 · 09ee983 · 09ee983
1 parent 9edf871
commit 09ee983
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/libs/tup-components/src/accounts/ManageAccount.module.css b/libs/tup-components/src/accounts/ManageAccount.module.css
@@ -1,3 +1,5 @@
+@import url('@tacc/core-styles/src/lib/_imports/tools/media-queries.css');
+
 .account-layout{
     padding: var(--global-space--section);
     padding-right: 30px;
@@ -52,11 +54,25 @@
     width: fit-content;
 }
 
-.tap-separator {
-    border-right: 1px solid #707070;
-    margin-top: 10px;
-}
-
 .mfa-options {
     /* no styles needed yet */
 }
+
+@media (--narrow-and-above) {
+    .tap-separator {
+        border-right: 1px solid #707070;
+        margin-top: 10px;
+    }
+
+}
+
+@media (--narrow-and-below) {
+    .account-body {
+        flex-direction: column-reverse;
+        gap: 20px;
+    }
+
+    .tap-separator {
+        display: none;
+    }
+}
diff --git a/libs/tup-components/src/accounts/ManageAccount.tsx b/libs/tup-components/src/accounts/ManageAccount.tsx
@@ -104,7 +104,6 @@ const ManageAccount: React.FC = () => {
           <section>
             <ManageUser />
             <ManagePassword />
-            <span />
             <ManageDNs />
             <ManageUpload />
           </section>