Fix Bitbucket file path wrapping (#12182)

Fixes #11110
sourcegraph · Jul 15, 2020 · 06e74db · 06e74db
1 parent 21d078a
commit 06e74db
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/browser/src/shared/code-hosts/bitbucket/style.scss b/browser/src/shared/code-hosts/bitbucket/style.scss
@@ -28,11 +28,11 @@
     margin-left: 2px; // same as other buttons in the row
 }
 
+.sg-toolbar-mount-bitbucket-server,
 .code-view-toolbar--bitbucket {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    margin-top: -5px !important;
+    // Layout action item children within the .secondary wrapping context,
+    // so they wrap together with the native Bitbucket buttons
+    display: contents;
 }
 
 .action-nav-item--bitbucket {
@@ -43,12 +43,15 @@
 // Use flexbox instead of float, so we can handle wrapping action items
 .file-toolbar {
     display: flex;
+    align-items: center;
+    // Trigger a two-row layout if file path and action items don't fit all in one row.
+    flex-wrap: wrap;
+
     > .primary {
-        flex: 1 0 auto;
+        // Make sure file paths don't wrap to make space for buttons
+        // (instead trigger a two-row layout if it does not fit)
+        flex: 0 2 auto;
         order: 1;
-
-        display: flex;
-        align-items: center;
     }
     > .secondary {
         // Overrides
@@ -57,11 +60,25 @@
         line-height: initial;
 
         flex: 1 1 auto;
+        flex-wrap: wrap;
         order: 2;
 
         display: flex;
         align-items: center;
         justify-content: flex-end;
+
+        > .aui-buttons {
+            // Layout all child buttons within the parent wrapping context (.secondary),
+            // so they wrap together with our toolbar buttons.
+            display: contents;
+
+            > .aui-button {
+                // Reapply margins that are on the .aui-buttons element to the .aui-button elements,
+                // because the display: contents removes margins from the .aui-buttons element
+                margin-left: 5px;
+                margin-top: 5px;
+            }
+        }
     }
 }
 

diff --git a/browser/src/shared/code-hosts/github/style.scss b/browser/src/shared/code-hosts/github/style.scss
@@ -52,8 +52,12 @@
 // Diff views
 .diff-view {
     .file-header {
+        // Trigger a two-row layout if file path and action items don't fit all in one row.
         flex-wrap: wrap;
+
         .file-info {
+            // Make sure file paths don't wrap to make space for buttons
+            // (instead trigger a two-row layout if it does not fit)
             flex: 0 2 auto !important;
         }
         .file-actions {