Merge pull request #7762 from BloomBooks/BL16044_Narrow

Fix edit tab top bar layout when window is narrow (BL-16044) (#7762)

Author: StephenMcConnel

src/BloomBrowserUI/react_components/TopBar/TopBar.tsx

@@ -118,10 +118,14 @@ export const TopBar: React.FunctionComponent = () => {
                     padding-top: 2px;
                     display: flex;
                     align-items: flex-start;
-                    gap: 100px;
                 `}
             >
                 <BloomTabs tabStates={tabStates} selectTab={handleSelectTab} />
+                <div
+                    css={css`
+                        flex: 0 1 100px;
+                    `}
+                />
                 <TopBarControls activeTab={activeTab} />
                 <TopBarContextMenu targetRef={topBarRef} />
             </div>

src/BloomBrowserUI/react_components/TopBar/TopBarControls.tsx

@@ -11,7 +11,7 @@ export const TopBarControls: React.FunctionComponent<{
     return (
         <div
             css={css`
-                flex: 1;
+                flex: 1 0 auto;
                 display: flex;
                 justify-content: space-between;
                 padding-top: 2px;