fix tab wrapping with a lil' css tweak (#2013) (#2076)

languy · analogrelay · web-flow · commit 63d4b4f4ef4c · 2025-03-17T11:51:59.000+01:00
Co-authored-by: Ashley Stanton-Nurse &lt;ashleyst@microsoft.com&gt;
diff --git a/less/documentDB.less b/less/documentDB.less
@@ -1914,13 +1914,20 @@ input::-webkit-calendar-picker-indicator::after {
 }
 
 .nav-tabs-margin {
-  height: 32px;
   background-color: #f2f2f2;
 
   .nav-tabs {
     display: flex;
+    flex-wrap: wrap;
     align-items: flex-end;
     height: 100%;
+    margin-bottom: -0.5px;
+
+    li {
+      // Override the bootstrap defaults here to align with our layout constants.
+      margin-bottom: 0px;
+      height: 32px;
+    }
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -1914,13 +1914,20 @@ input::-webkit-calendar-picker-indicator::after {`
`1914`	`1914`	`}`
`1915`	`1915`
`1916`	`1916`	`.nav-tabs-margin {`
`1917`		`- height: 32px;`
`1918`	`1917`	`background-color: #f2f2f2;`
`1919`	`1918`
`1920`	`1919`	`.nav-tabs {`
`1921`	`1920`	`display: flex;`
	`1921`	`+ flex-wrap: wrap;`
`1922`	`1922`	`align-items: flex-end;`
`1923`	`1923`	`height: 100%;`
	`1924`	`+ margin-bottom: -0.5px;`
	`1925`	`+`
	`1926`	`+ li {`
	`1927`	`+ // Override the bootstrap defaults here to align with our layout constants.`
	`1928`	`+ margin-bottom: 0px;`
	`1929`	`+ height: 32px;`
	`1930`	`+ }`
`1924`	`1931`	`}`
`1925`	`1932`	`}`
`1926`	`1933`