feat(usm): enable responsive behavior (#3494)

* feat(usm): enable responsive behavior * refactor: organize styles and specificity
box · Jan 22, 2024 · 76db2a5 · 76db2a5
1 parent 7fe59b8
commit 76db2a5
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 80 deletions.
diff --git a/src/features/collaborator-avatars/CollaboratorList.scss b/src/features/collaborator-avatars/CollaboratorList.scss
@@ -2,7 +2,6 @@
 
 .usm-collaborator-list {
     .collaborator-list {
-        min-width: 400px;
         height: 210px;
         margin: 0;
         overflow-y: scroll;
@@ -11,3 +10,14 @@
         box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .08) inset;
     }
 }
+
+@include breakpoint($small-medium-screen) {
+    .usm-collaborator-list {
+        .collaborator-list {
+            height: auto;
+            border: 0;
+            border-radius: 0;
+            box-shadow: none;
+        }
+    }
+}
diff --git a/src/features/unified-share-modal/UnifiedShareModal.scss b/src/features/unified-share-modal/UnifiedShareModal.scss
@@ -3,82 +3,6 @@
 @import '../../styles/mixins/overlay';
 @import '../../components/pill-selector-dropdown/mixins';
 
-.is-responsive-web {
-    .collaborator-list {
-        min-width: 0;
-    }
-
-    @include breakpoint($small-screen) {
-        .shared-link-access-row {
-            display: flex;
-            justify-content: space-between;
-
-            .btn-plain {
-                margin-right: 0;
-            }
-        }
-    }
-
-    @include breakpoint($medium-screen) {
-        .usm-menu-description {
-            white-space: normal;
-        }
-
-        .usm-share-access-menu {
-            //can't use just 'min' b/c SASS compiler error
-            width: #{'min(400px, 90%)'};
-        }
-    }
-
-    @include breakpoint($small-medium-screen) {
-        .collaborator-list {
-            height: auto;
-            border: 0;
-            border-radius: 0;
-            box-shadow: none;
-        }
-
-        .shared-link-field-container {
-            height: $bdl-btn-height;
-
-            .btn {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 60px;
-                min-width: 0;
-                height: $bdl-btn-height;
-            }
-        }
-
-        .email-shared-link-btn {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: $bdl-btn-height;
-            height: $bdl-btn-height;
-        }
-
-        .unified-share-modal {
-            .modal-content {
-                padding-top: $bdl-grid-unit * 3;
-            }
-
-            .shared-link-field-row .email-shared-link-btn {
-                margin-left: $bdl-grid-unit * 4;
-            }
-        }
-
-        .text-input-container {
-            height: $bdl-btn-height;
-
-            input {
-                height: 100%;
-            }
-        }
-    }
-}
-
 // Menus are rendered at the root of the DOM, so this style is not nested
 .usm-menu-description {
     display: block;
@@ -285,9 +209,6 @@
         .shared-link-field-container {
             flex: 1;
             align-items: center;
-        }
-
-        .text-input-with-copy-button-container {
             margin-bottom: 0;
         }
 
@@ -402,3 +323,64 @@
         }
     }
 }
+
+@include breakpoint($medium-screen) {
+    .usm-menu-description {
+        white-space: normal;
+    }
+
+    .usm-share-access-menu {
+        width: #{'min(400px, 90%)'};
+    }
+}
+
+@include breakpoint($small-medium-screen) {
+    .unified-share-modal {
+        .modal-content {
+            padding-top: $bdl-grid-unit * 3;
+        }
+
+        .shared-link-field-row {
+            .shared-link-field-container {
+                .btn {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 60px;
+                    min-width: 0;
+                    height: $bdl-btn-height;
+                }
+            }
+
+            .text-input-container {
+                height: $bdl-btn-height;
+
+                input {
+                    height: 100%;
+                }
+            }
+
+            .email-shared-link-btn {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: $bdl-btn-height;
+                height: $bdl-btn-height;
+                margin-left: $bdl-grid-unit * 4;
+            }
+        }
+    }
+}
+
+@include breakpoint($small-screen) {
+    .unified-share-modal {
+        .shared-link-access-row {
+            display: flex;
+            justify-content: space-between;
+
+            .btn-plain {
+                margin-right: 0;
+            }
+        }
+    }
+}