fix: improve toolbar responsiveness

Author: artem-harbour

packages/super-editor/src/editors/v1/components/toolbar/ButtonGroup.vue

@@ -39,30 +39,37 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  compactSideGroups: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const currentItem = ref(null);
 const { isHighContrastMode } = useHighContrastMode();
 // Matches media query from SuperDoc.vue
 const isMobile = window.matchMedia('(max-width: 768px)').matches;
-const styleMap = {
-  left: {
-    minWidth: '120px',
-    justifyContent: 'flex-start',
-  },
-  right: {
-    minWidth: '120px',
-    justifyContent: 'flex-end',
-  },
-  default: {
+
+const getPositionStyle = computed(() => {
+  if (props.position === 'left') {
+    return {
+      minWidth: props.compactSideGroups ? 'auto' : '120px',
+      justifyContent: 'flex-start',
+    };
+  }
+
+  if (props.position === 'right') {
+    return {
+      minWidth: props.compactSideGroups ? 'auto' : '120px',
+      justifyContent: 'flex-end',
+    };
+  }
+
+  return {
     // Only grow if not on a mobile device
     flexGrow: isMobile ? 0 : 1,
     justifyContent: 'center',
-  },
-};
-
-const getPositionStyle = computed(() => {
-  return styleMap[props.position] || styleMap.default;
+  };
 });
 
 const isButton = (item) => item.type === 'button';

packages/super-editor/src/editors/v1/components/toolbar/Toolbar.vue

@@ -14,6 +14,7 @@ const { proxy } = getCurrentInstance();
 const emit = defineEmits(['command', 'toggle', 'select']);
 
 let toolbarKey = ref(1);
+const compactSideGroups = ref(false);
 
 /**
  * Computed property that determines the font-family to use for toolbar UI surfaces.
@@ -40,9 +41,14 @@ const getFilteredItems = (position) => {
   return proxy.$toolbar.getToolbarItemByGroup(position).filter((item) => !excludeButtonsList.includes(item.name.value));
 };
 
+const updateCompactSideGroups = () => {
+  compactSideGroups.value = (proxy.$toolbar.toolbarContainer?.offsetWidth ?? 0) <= 1280;
+};
+
 onMounted(() => {
   window.addEventListener('resize', onResizeThrottled);
   window.addEventListener('keydown', onKeyDown);
+  updateCompactSideGroups();
 });
 
 onDeactivated(() => {
@@ -66,6 +72,7 @@ const onKeyDown = async (e) => {
 
 const onWindowResized = async () => {
   await proxy.$toolbar.onToolbarResize();
+  updateCompactSideGroups();
   toolbarKey.value += 1;
 };
 const onResizeThrottled = throttle(onWindowResized, 300);
@@ -107,6 +114,7 @@ const handleToolbarMousedown = (e) => {
       tabindex="0"
       v-if="showLeftSide"
       :toolbar-items="getFilteredItems('left')"
+      :compact-side-groups="compactSideGroups"
       :ui-font-family="uiFontFamily"
       position="left"
       @command="handleCommand"
@@ -117,6 +125,7 @@ const handleToolbarMousedown = (e) => {
       tabindex="0"
       :toolbar-items="getFilteredItems('center')"
       :overflow-items="proxy.$toolbar.overflowItems"
+      :compact-side-groups="compactSideGroups"
       :ui-font-family="uiFontFamily"
       position="center"
       @command="handleCommand"
@@ -126,6 +135,7 @@ const handleToolbarMousedown = (e) => {
       tabindex="0"
       v-if="showRightSide"
       :toolbar-items="getFilteredItems('right')"
+      :compact-side-groups="compactSideGroups"
       :ui-font-family="uiFontFamily"
       position="right"
       @command="handleCommand"
@@ -148,12 +158,6 @@ const handleToolbarMousedown = (e) => {
   z-index: var(--sd-ui-toolbar-z-index, 10);
 }
 
-@media (max-width: 1280px) {
-  .superdoc-toolbar-group-side {
-    min-width: auto !important;
-  }
-}
-
 @media (max-width: 768px) {
   .superdoc-toolbar {
     padding: 4px 10px;

packages/super-editor/src/editors/v1/components/toolbar/ToolbarButton.vue

@@ -291,21 +291,19 @@ const caretIcon = computed(() => {
   height: 10px;
 }
 
-@media (max-width: 1280px) {
-  .toolbar-item--doc-mode .button-label {
-    display: none;
-  }
+.toolbar-item--doc-mode-compact .button-label {
+  display: none;
+}
 
-  .toolbar-item--doc-mode .toolbar-icon {
-    margin-right: 5px;
-  }
+.toolbar-item--doc-mode-compact .toolbar-icon {
+  margin-right: 5px;
+}
 
-  .toolbar-item--linked-styles {
-    width: auto !important;
-  }
+.toolbar-item--linked-styles-compact {
+  width: auto !important;
+}
 
-  .toolbar-item--linked-styles .button-label {
-    display: none;
-  }
+.toolbar-item--linked-styles-compact .button-label {
+  display: none;
 }
 </style>

packages/super-editor/src/editors/v1/components/toolbar/defaultItems.js

@@ -1043,18 +1043,38 @@ export const makeDefaultItems = ({
     }),
   });
 
-  // Responsive toolbar calculations
-  const breakpoints = {
+  // Responsive toolbar calculations.
+  // `availableWidth` comes from SuperToolbar and represents either:
+  // - container width when `responsiveToContainer: true`
+  // - viewport/document width when `responsiveToContainer: false`
+  const RESPONSIVE_BREAKPOINTS = {
     sm: 768,
     md: 1024,
     lg: 1280,
     xl: 1410,
   };
+  const XL_OVERFLOW_SAFETY_BUFFER = 20;
   const stickyItemsWidth = 120;
   const toolbarPadding = 32;
 
   const itemsToHideXL = ['linkedStyles', 'clearFormatting', 'copyFormat', 'ruler'];
   const itemsToHideSM = ['zoom', 'fontFamily', 'fontSize', 'redo'];
+  const shouldCompactDocumentMode = availableWidth <= RESPONSIVE_BREAKPOINTS.lg;
+  const shouldCompactLinkedStyles = availableWidth <= RESPONSIVE_BREAKPOINTS.lg;
+
+  if (shouldCompactDocumentMode) {
+    documentMode.attributes.value = {
+      ...documentMode.attributes.value,
+      className: `${documentMode.attributes.value.className} toolbar-item--doc-mode-compact`,
+    };
+  }
+
+  if (shouldCompactLinkedStyles) {
+    linkedStyles.attributes.value = {
+      ...linkedStyles.attributes.value,
+      className: `${linkedStyles.attributes.value.className} toolbar-item--linked-styles-compact`,
+    };
+  }
 
   let toolbarItems = [
     undo,
@@ -1106,7 +1126,7 @@ export const makeDefaultItems = ({
   }
 
   // Hide separators on small screens
-  if (availableWidth <= breakpoints.md && hideButtons) {
+  if (availableWidth <= RESPONSIVE_BREAKPOINTS.md && hideButtons) {
     toolbarItems = toolbarItems.filter((item) => item.type !== 'separator');
   }
 
@@ -1141,7 +1161,11 @@ export const makeDefaultItems = ({
   toolbarItems.forEach((item) => {
     const itemWidth = controlSizes.get(item.name.value) || controlSizes.get('default');
 
-    if (availableWidth < breakpoints.xl && itemsToHideXL.includes(item.name.value) && hideButtons) {
+    if (
+      availableWidth <= RESPONSIVE_BREAKPOINTS.xl + XL_OVERFLOW_SAFETY_BUFFER &&
+      itemsToHideXL.includes(item.name.value) &&
+      hideButtons
+    ) {
       overflowItems.push(item);
       if (item.name.value === 'linkedStyles') {
         const linkedStylesIdx = toolbarItems.findIndex((item) => item.name.value === 'linkedStyles');
@@ -1150,7 +1174,7 @@ export const makeDefaultItems = ({
       return;
     }
 
-    if (availableWidth < breakpoints.sm && itemsToHideSM.includes(item.name.value) && hideButtons) {
+    if (availableWidth < RESPONSIVE_BREAKPOINTS.sm && itemsToHideSM.includes(item.name.value) && hideButtons) {
       overflowItems.push(item);
       return;
     }

packages/superdoc/src/dev/components/SuperdocDev.vue

@@ -730,7 +730,7 @@ const init = async () => {
         // },
         // fonts: null,
         // hideButtons: false,
-        // responsiveToContainer: true,
+        responsiveToContainer: true,
         excludeItems: [], // ['italic', 'bold'],
         // texts: {},
       },
@@ -853,12 +853,12 @@ const init = async () => {
             },
           }
         : {}),
-      ai: {
-        // Provide your Harbour API key here for direct endpoint access
-        // apiKey: 'test',
-        // Optional: Provide a custom endpoint for AI services
-        // endpoint: 'https://sd-dev-express-gateway-i6xtm.ondigitalocean.app/insights',
-      },
+      // ai: {
+      // Provide your Harbour API key here for direct endpoint access
+      // apiKey: 'test',
+      // Optional: Provide a custom endpoint for AI services
+      // endpoint: 'https://sd-dev-express-gateway-i6xtm.ondigitalocean.app/insights',
+      // },
       pdf: {
         pdfLib: pdfjsLib,
         setWorker: false,