[WEB] Toolbar overflow: drop one button at a time (#34171)

* adding individual hiding logic for the toolbar icons

* using css for logic

GitOrigin-RevId: 87e9f72c1dab888e2701ef108ecaa0b190e366ff

services/web/frontend/js/features/source-editor/components/toolbar/toolbar-items.tsx

@@ -136,47 +136,69 @@ export const ToolbarItems: FC<{
               )}
             </div>
           )}
-          {showGroup('group-misc') && (
-            <div
-              className="ol-cm-toolbar-button-group"
-              data-overflow="group-misc"
-              aria-label={t('toolbar_insert_misc')}
-            >
-              <ToolbarButton
-                id="toolbar-href"
-                label={t('toolbar_insert_link')}
-                command={commands.wrapInHref}
-                icon="add_link"
-              />
-              {features.trackChangesVisible && permissions.comment && (
+          <div
+            className="ol-cm-toolbar-button-group"
+            data-overflow="group-misc"
+            aria-label={t('toolbar_insert_misc')}
+          >
+            {showGroup('misc-href') && (
+              <div data-overflow="misc-href">
                 <ToolbarButton
-                  id="toolbar-add-comment"
-                  label={t('add_comment')}
-                  disabled={isCursorOnEmptyLine(state)}
-                  command={addCommentFromToolbar}
-                  icon="add_comment"
+                  id="toolbar-href"
+                  label={t('toolbar_insert_link')}
+                  command={commands.wrapInHref}
+                  icon="add_link"
                 />
+              </div>
+            )}
+            {features.trackChangesVisible &&
+              permissions.comment &&
+              showGroup('misc-comment') && (
+                <div data-overflow="misc-comment">
+                  <ToolbarButton
+                    id="toolbar-add-comment"
+                    label={t('add_comment')}
+                    disabled={isCursorOnEmptyLine(state)}
+                    command={addCommentFromToolbar}
+                    icon="add_comment"
+                  />
+                </div>
               )}
-              <ToolbarButton
-                id="toolbar-ref"
-                label={t('toolbar_insert_cross_reference')}
-                command={commands.insertRef}
-                icon="sell"
-              />
-              <ToolbarButton
-                id="toolbar-cite"
-                label={t('toolbar_insert_citation')}
-                command={commands.insertCite}
-                icon="book_5"
-              />
-              <InsertFigureDropdown />
-              {writefullInstance || showAiFeaturesDisabled ? (
-                <TableDropdown />
-              ) : (
-                <LegacyTableDropdown />
-              )}
-            </div>
-          )}
+            {showGroup('misc-ref') && (
+              <div data-overflow="misc-ref">
+                <ToolbarButton
+                  id="toolbar-ref"
+                  label={t('toolbar_insert_cross_reference')}
+                  command={commands.insertRef}
+                  icon="sell"
+                />
+              </div>
+            )}
+            {showGroup('misc-cite') && (
+              <div data-overflow="misc-cite">
+                <ToolbarButton
+                  id="toolbar-cite"
+                  label={t('toolbar_insert_citation')}
+                  command={commands.insertCite}
+                  icon="book_5"
+                />
+              </div>
+            )}
+            {showGroup('misc-figure') && (
+              <div data-overflow="misc-figure">
+                <InsertFigureDropdown />
+              </div>
+            )}
+            {showGroup('misc-table') && (
+              <div data-overflow="misc-table">
+                {writefullInstance || showAiFeaturesDisabled ? (
+                  <TableDropdown />
+                ) : (
+                  <LegacyTableDropdown />
+                )}
+              </div>
+            )}
+          </div>
           {showGroup('group-list') && (
             <div
               className="ol-cm-toolbar-button-group"

services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts

@@ -140,6 +140,14 @@ const toolbarTheme = EditorView.theme({
     '&:not(:first-child)': {
       borderLeft: '1px solid rgba(125, 125, 125, 0.3)',
     },
+    '&:has(> [data-overflow]):not(:has(> [data-overflow]:not(.overflow-hidden)))':
+      {
+        borderLeft: 'none',
+        padding: 0,
+      },
+    '&:empty': {
+      display: 'none',
+    },
     '&.ol-cm-toolbar-end': {
       borderLeft: 'none',
     },
@@ -151,6 +159,10 @@ const toolbarTheme = EditorView.theme({
       width: 0,
       padding: 0,
     },
+    '& > [data-overflow].overflow-hidden': {
+      width: 0,
+      overflow: 'hidden',
+    },
   },
   '.ol-cm-toolbar-wrapper-needs-border .ol-cm-toolbar-button-group:first-child':
     {