@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/brand-page-maker/components/rich-text-editor/RichTextEditor.vue

@@ -5,39 +5,75 @@
   >
     <div>
       <div class="style-editor">
-        <Dropdown
+        <TextStyleRoleDropdown
           ref="textStyleTypeDropdownRef"
           v-click-outside="(e: Event) => clickOutsideTextStyle(e)"
           data-test-tag="text-style-dropdown"
           class="style-editor-button style-editor-button-textstyle"
-          :title="
-            textStyleTypeOptions.find((option) => option.isSelected)?.label ??
-            TEXT_STYLE_TYPES_DISPLAY_NAME_MAP().none
-          "
-          icon-size="xs"
           element-classes="text-dropdown-title"
-          menu-element-classes="tw-min-w-[310px] tw-left-0"
-          :force-down-position="true"
+          menu-element-classes="tw-min-w-[220px] tw-left-0"
+          :selected="selectedRoleType"
+          :has-override="hasTypographyOverride()"
+          @select="
+            onSelectTextStyleType({ value: $event } as ButtonGroupOption)
+          "
+        />
+        <!-- Style actions: shown only when this block overrides its role typography; otherwise
+             the slot collapses and the two pickers share its width. This relative anchor is the
+             popup's OWN positioning context, so `.style-editor` stays static and the
+             colour-picker popup keeps the tall drawer as its containing block. -->
+        <div
+          ref="styleModifiedAnchorRef"
+          class="style-modified-anchor"
+          data-test-tag="style-modified-anchor"
+          :class="{ 'style-modified-anchor--hidden': !hasTypographyOverride() }"
+          :aria-hidden="!hasTypographyOverride()"
         >
+          <button
+            type="button"
+            class="toolbar-editor-button style-modified-toggle"
+            data-test-tag="style-modified-toggle"
+            :class="{ active: isStyleModifiedPopupOpen }"
+            :aria-label="textStyleFieldTr('textStyleActionsAriaLabel')"
+            @click="toggleStyleModifiedPopup()"
+          >
+            <Icon name="roller-brush" size="sm" />
+          </button>
           <div
-            class="tw-z-1000 tw-bg-white tw-text-grayscale-600"
-            title="Text style"
+            v-if="isStyleModifiedPopupOpen && hasTypographyOverride()"
+            v-click-outside="(e: Event) => clickOutsideStyleModified(e)"
+            class="style-modified-popup"
+            data-test-tag="style-modified-toolbar"
+            :style="{ left: styleModifiedPopupLeft + 'px' }"
           >
-            <div
-              v-for="option in textStyleTypeOptions"
-              :key="option.value"
-              class="tw-flex tw-items-center tw-px-2 tw-py-2 drop-down-item tw-cursor-pointer"
-              @click="onSelectTextStyleType(option)"
-            >
-              <span
-                class="tw-flex tw-flex-row tw-w-full tw-justify-between tw-items-center"
+            <div class="popup-panel tw-flex tw-flex-col tw-gap-1">
+              <p class="tw-text-xs tw-text-grayscale-600 tw-mb-1">
+                {{ textStyleFieldTr('styleModifiedHeader') }}
+              </p>
+              <a
+                v-if="canApplyTypographyToRole()"
+                class="tw-flex tw-items-center tw-gap-2 tw-cursor-pointer tw-text-sm tw-text-grayscale-700 tw-py-1"
+                data-test-tag="style-modified-apply"
+                @click="applyStyleToRole()"
+              >
+                <Icon name="refresh" size="sm" />
+                <span>{{
+                  textStyleFieldTr('applyChangesToAll', {
+                    role: selectedRoleLabel,
+                  })
+                }}</span>
+              </a>
+              <a
+                class="tw-flex tw-items-center tw-gap-2 tw-cursor-pointer tw-text-sm tw-text-grayscale-700 tw-py-1"
+                data-test-tag="style-modified-reset"
+                @click="resetStyleToRole()"
               >
-                {{ option.label }}
-                <Icon v-if="option.isSelected" name="check-thin" size="sm" />
-              </span>
+                <Icon name="undo" size="sm" />
+                <span>{{ textStyleFieldTr('resetToDefault') }}</span>
+              </a>
             </div>
           </div>
-        </Dropdown>
+        </div>
         <Dropdown
           ref="fontStyleDropdownRef"
           v-click-outside="(e: Event) => clickOutsideFontStyle(e)"
@@ -47,8 +83,8 @@
           class="style-editor-button style-editor-button-font"
           element-classes="text-dropdown-title"
           :menu-z-index="10"
-          menu-element-classes="tw-origin-top-left tw-min-w-[310px] md:tw-min-w-[350px] left-align !tw-z-10"
-          menu-align="left"
+          menu-element-classes="tw-origin-top-right tw-min-w-[310px] md:tw-min-w-[350px] !tw-z-10"
+          menu-align="right"
           :force-down-position="true"
         >
           <DropdownItem
@@ -72,7 +108,8 @@
           </DropdownItem>
         </Dropdown>
 
-        <div class="border mobile" />
+        <!-- Break to the second row; the size stepper leads it (BP-5969). -->
+        <div class="border" />
         <div class="style-editor-button stepper">
           <NumberStepper
             v-model="fontSettings.selectedFontSizePx"
@@ -81,7 +118,7 @@
             :max="MAX_TEXT_SIZE_PX"
             size="xs"
             :full-height="true"
-            :input-classes="'tw-min-w-8 tw-text-sm tw-text-grayscale-600'"
+            :input-classes="'tw-min-w-7 tw-px-0 tw-text-sm tw-text-grayscale-600'"
             :container-class="'style-editor-button-stepper tw-h-8 '"
             :timer-to-minimum="750"
             @input="
@@ -92,10 +129,10 @@
             "
           />
         </div>
-        <div class="style-editor-button">
+        <div class="toolbar-editor-button">
           <ColorField
             id="text-color-picker"
-            class="tw-max-h-9 tw-max-w-8 tw-justify-center"
+            class="tw-max-h-8 tw-max-w-8 tw-justify-center"
             data-test-tag="text-color-picker"
             name="fill"
             :is-rich-text-editor="true"
@@ -117,15 +154,13 @@
             "
           />
         </div>
-
-        <div class="border desktop" />
         <Button
           class="toolbar-editor-button"
           data-test-tag="bold-toolbar"
           icon="maker-bold"
           icon-size="sm"
           :class="{
-            active: editor.isActive('bold'),
+            active: fontSettings.isBold,
           }"
           @click="
             triggerEditorStyleChange({ type: 'fontWeight', value: 'bold' })
@@ -137,7 +172,7 @@
           icon="maker-italic"
           icon-size="sm"
           :class="{
-            active: editor.isActive('italic'),
+            active: fontSettings.isItalic,
           }"
           @click="
             triggerEditorStyleChange({ type: 'fontStyle', value: 'italic' })
@@ -149,7 +184,7 @@
           data-test-tag="underline-toolbar"
           icon-size="sm"
           :class="{
-            active: editor.isActive('underline'),
+            active: fontSettings.isUnderline,
           }"
           @click="
             triggerEditorStyleChange({
@@ -159,7 +194,6 @@
           "
         />
 
-        <div class="border mobile" />
         <Button
           class="toolbar-editor-button"
           data-test-tag="strikethrough-toolbar"
@@ -167,7 +201,7 @@
           icon-size="sm"
           justify="center"
           :class="{
-            active: editor.isActive('strike'),
+            active: fontSettings.isStrike,
           }"
           @click="
             triggerEditorStyleChange({
@@ -179,7 +213,7 @@
         <div class="toolbar-editor-button">
           <ColorField
             id="text-background-color-picker"
-            class="tw-max-h-9 tw-max-w-9 tw-justify-center"
+            class="tw-max-h-8 tw-max-w-8 tw-justify-center"
             data-test-tag="background-color-picker"
             name="fill"
             :is-rich-text-editor="true"
@@ -203,14 +237,17 @@
         <Button
           class="toolbar-editor-button"
           :icon="currentAlignment.icon"
-          data-test-tag="alignment-toolbar"
+          data-test-tag="text-align-toolbar"
           icon-size="sm"
           justify="center"
           :class="{
             active: currentAlignment.isActive(),
           }"
           @click="
-            triggerEditorStyleChange({ type: 'textAlign', value: 'center' })
+            triggerEditorStyleChange({
+              type: 'textAlign',
+              value: 'center',
+            })
           "
         />
         <Button
@@ -373,6 +410,7 @@
         tabindex="0"
         :editor="editor"
         :v-model="model"
+        :class="editorRoleClass"
         @focus="onFocus"
         @blur="onBlur"
       />
@@ -394,6 +432,10 @@ import {
 } from '@designcrowd/fe-shared-lib';
 import { EditorContent } from '@tiptap/vue-3';
 import { BubbleMenu } from '@tiptap/vue-3/menus';
+// v-click-outside resolves to this local binding — the directive is NOT registered
+// globally (the host app registers zero directives), so every component that uses
+// it must import it, or the toolbar dropdowns/popups won't close on outside-click.
+import { directive as vClickOutside } from 'click-outside-vue3';
 import { useRichTextEditor } from '../../composables/rich-text-editor/useRichTextEditor';
 import FontPicker from '@shared/font-family-selector/FontPicker.vue';
 import ColorField from '@shared/content-settings/components/color-field/ColorField.vue';
@@ -408,14 +450,20 @@ import {
   MAX_LINE_HEIGHT,
   DEFAULT_FONT_SIZE,
   MAX_TEXT_SIZE_PX,
-  TEXT_STYLE_TYPES,
   HYPERLINK_TYPE,
   type TextStyleDeclaration,
   type TextItem,
   type HyperlinkType,
   TEXT_STYLE_TYPES_DISPLAY_NAME_MAP,
   FONT_FAMILY_CONFIGS,
+  CANONICAL_TEXT_STYLE_TYPES,
+  type CanonicalTextStyleType,
 } from '@brand-page';
+import {
+  CLEARED_TYPOGRAPHY,
+  TEXT_STYLE_CASCADE_PROPS,
+  textRoleClassName,
+} from '@shared/text-role-typography.util';
 import {
   useBrandPageContainerStore,
   useUiStore,
@@ -423,6 +471,7 @@ import {
 import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
 import FieldSubHeader from '@shared/content-settings/components/field-sub-header/FieldSubHeader.vue';
 import PageDropdownField from '@shared/content-settings/components/page-dropdown-field/PageDropdownField.vue';
+import TextStyleRoleDropdown from '@shared/content-settings/components/text-style-role-dropdown/TextStyleRoleDropdown.vue';
 import {
   textStyleFieldTr,
   contentSettingsTr,
@@ -497,6 +546,86 @@ const emit = defineEmits([
 
 const isSpacingDropdownOpen = ref(false);
 
+// BP-5969: floating "this style has been modified" popup next to the role dropdown — offers
+// "apply overrides to the role site-wide" and "reset to the role default". Only shown when
+// the block overrides its role typography (hasTypographyOverride).
+const isStyleModifiedPopupOpen = ref(false);
+const styleModifiedAnchorRef = ref<HTMLElement>();
+// The popup hangs under the toggle, centred on it. This inline value is that centring
+// offset plus the clamp that keeps a 300px popup inside the toolbar when the toggle sits
+// too near an edge. When the popup is wider than the toolbar (narrow mobile drawer) it
+// can't be centred, so the left edge wins and it pins to the toolbar's left.
+const styleModifiedPopupLeft = ref(0);
+
+const STYLE_MODIFIED_POPUP_WIDTH = 300;
+
+const toggleStyleModifiedPopup = () => {
+  isStyleModifiedPopupOpen.value = !isStyleModifiedPopupOpen.value;
+
+  if (!isStyleModifiedPopupOpen.value) return;
+
+  const anchor = styleModifiedAnchorRef.value;
+  const styleEditor = anchor?.closest('.style-editor');
+
+  if (!anchor || !styleEditor) return;
+
+  const EDGE = 4;
+  const a = anchor.getBoundingClientRect();
+  const bar = styleEditor.getBoundingClientRect();
+
+  // Centre the popup on the toggle, then clamp: never overflow the toolbar's right edge,
+  // never slip past its left edge (which also wins when the popup can't fit centred).
+  const centredLeft = a.width / 2 - STYLE_MODIFIED_POPUP_WIDTH / 2;
+  const maxLeft = bar.right - EDGE - STYLE_MODIFIED_POPUP_WIDTH - a.left;
+  const minLeft = bar.left + EDGE - a.left;
+  styleModifiedPopupLeft.value = Math.round(
+    Math.max(Math.min(centredLeft, maxLeft), minLeft),
+  );
+};
+
+const selectedRoleLabel = computed(
+  () => textStyleTypeOptions.find((option) => option.isSelected)?.label ?? '',
+);
+
+// Migration puts every field on one of the ten roles (`legacy-migrations.md`), so one option
+// is always selected.
+const selectedRoleType = computed(
+  () =>
+    textStyleTypeOptions.find((option) => option.isSelected)
+      ?.value as CanonicalTextStyleType,
+);
+
+const applyStyleToRole = () => {
+  applyTypographyToRole();
+  isStyleModifiedPopupOpen.value = false;
+};
+
+const writeBlockStyle = (value: Partial<TextStyleDeclaration>) => {
+  if (props.name === 'textItems') {
+    contentSettingStore.updateTextItemTextStyleTypeWithStyles({
+      id: props.rawId,
+      name: props.name,
+      value,
+      index: props.textItemIndex,
+    });
+  } else {
+    contentSettingStore.updateTextStyles({
+      id: props.rawId,
+      name: props.name,
+      value,
+    });
+  }
+};
+
+const resetStyleToRole = () => {
+  if (TEXT_STYLE_CASCADE_PROPS.some((prop) => props.styles?.[prop] != null)) {
+    writeBlockStyle({ ...CLEARED_TYPOGRAPHY });
+  }
+
+  resetTypographyToRole();
+  isStyleModifiedPopupOpen.value = false;
+};
+
 const containerStore = useBrandPageContainerStore();
 const uiStore = useUiStore();
 
@@ -505,29 +634,31 @@ const logoTheme = computed(() => uiStore.logoTheme);
 
 const updateRichTextEditor = ref(false);
 
-const textStyleTypeOptions = reactive([
-  {
-    value: undefined,
-    label: TEXT_STYLE_TYPES_DISPLAY_NAME_MAP().none,
-    isSelected: false,
-  },
-  ...Object.keys(TEXT_STYLE_TYPES).map((key) => ({
+// BP-5969 (ADR-0019): every block is always linked to a canonical role — no "none".
+const textStyleTypeOptions = reactive(
+  CANONICAL_TEXT_STYLE_TYPES.map((key) => ({
     value: key,
     label:
       TEXT_STYLE_TYPES_DISPLAY_NAME_MAP()[key][0].toUpperCase() +
       TEXT_STYLE_TYPES_DISPLAY_NAME_MAP()[key].slice(1),
     isSelected: props.styles.textStyleType === key,
   })),
-]) as ButtonGroupOption[];
+) as ButtonGroupOption[];
 
 const selectedGlobalTextStyles = computed({
   get: () =>
-    styleSettingsStore.textStyles.textStyleOptions[
-      textStyleTypeOptions.find((item) => item.isSelected)?.value ?? 'none'
-    ],
+    styleSettingsStore.textStyles.textStyleOptions[selectedRoleType.value],
   set: (type: string) => styleSettingsStore.textStyles.textStyleOptions[type],
 });
 
+// BP-5969: the role class on the editor host so unbaked content (A3b stops baking role
+// typography into marks) still shows the role's typography while editing. The rule comes
+// from the maker preview's global role <style> (`buildTextRoleRootCss`); here we only add
+// the class.
+const editorRoleClass = computed(() =>
+  textRoleClassName(selectedRoleType.value),
+);
+
 const fontSettings = reactive({
   selectedTextStyle: '',
   selectedFont: 'Lato',
@@ -542,6 +673,11 @@ const fontSettings = reactive({
     selectedGlobalTextStyles.value?.style?.color,
   ),
   selectedBackgroundColor: 'transparent',
+  // BP-5969: toolbar active-state for weight/style/decoration, kept in sync by selectionUpdate.
+  isBold: false,
+  isItalic: false,
+  isUnderline: false,
+  isStrike: false,
 });
 
 const isHyperlinkPopupOpen = ref(false);
@@ -624,48 +760,6 @@ watch(
   },
 );
 
-watch(
-  () => props.styles.textStyleType,
-  (newType) => {
-    if (newType) {
-      unsetAllMarks();
-      const globalStyle =
-        styleSettingsStore.textStyles.textStyleOptions[newType ?? 'titles']
-          .style;
-      copyGlobalStyleSettings(globalStyle);
-
-      // Adopt the newly-linked global style's colour onto this element.
-      if (isAdminMaker.value) {
-        const value = {
-          color: globalStyle.color ?? '',
-          backgroundColor: undefined,
-        };
-
-        if (props.name === 'textItems') {
-          contentSettingStore.updateTextItemTextStyleTypeWithStyles({
-            id: props.rawId,
-            name: props.name,
-            value,
-            index: props.textItemIndex,
-          });
-        } else {
-          contentSettingStore.updateTextStyles({
-            id: props.rawId,
-            name: props.name,
-            value,
-          });
-        }
-      }
-    } else {
-      // make sure text style options are updated and selected Global style is set to none
-      if (selectedGlobalTextStyles.value) {
-        onSelectTextStyleType({
-          label: TEXT_STYLE_TYPES_DISPLAY_NAME_MAP().none,
-        } as ButtonGroupOption);
-      }
-    }
-  },
-);
 // Watch pages button should be disabled if no other pages and switch to URL if page type is selected but no pages available
 watch(
   () => pageNavigationStore.routes.length,
@@ -684,60 +778,15 @@ const onSelectTextStyleType = (option: ButtonGroupOption) => {
     const optionSelected = item.value === option.value;
     if (optionSelected) {
       selectedGlobalTextStyles.value = item.value;
-      if (option.value === undefined) {
-        if (props.name === 'textItems') {
-          contentSettingStore.updateTextItemTextStyleTypeWithStyles({
-            id: props.rawId,
-            name: props.name,
-            value: {
-              textStyleType: undefined,
-              fontSize: fontSettings.selectedFontSize,
-            },
-            index: props.textItemIndex,
-          });
-        } else {
-          contentSettingStore.updateTextStyles({
-            id: props.rawId,
-            name: props.name,
-            value: {
-              textStyleType: undefined,
-              fontSize: fontSettings.selectedFontSize,
-            },
-          });
-        }
-      } else {
-        const selectedStyle: BrandPageCssStyle =
-          styleSettingsStore.textStyles.textStyleOptions[
-            option.value ?? 'titles'
-          ].style;
-
-        // Linking drops the element's own colour/background override so it
-        // inherits the style's colour — the renderer resolves colour
-        // element-first, so a colour parked before the link would otherwise keep
-        // winning. Admins re-adopt the token-resolved colour in the
-        // textStyleType watcher above.
-        const value = {
-          textStyleType: option.value,
-          fontSize: selectedStyle.fontSize,
-          color: undefined,
-          backgroundColor: undefined,
-        };
-
-        if (props.name === 'textItems') {
-          contentSettingStore.updateTextItemTextStyleTypeWithStyles({
-            id: props.rawId,
-            name: props.name,
-            value,
-            index: props.textItemIndex,
-          });
-        } else {
-          contentSettingStore.updateTextStyles({
-            id: props.rawId,
-            name: props.name,
-            value,
-          });
-        }
-      }
+
+      // Linking a role is a typography-only action (ADR-0020): it writes the new
+      // `textStyleType` and drops the block's own typography, so the block takes the role's
+      // look. Colour and background stay — a role carries no colour. The runs relink in
+      // the composable's `textStyleType` watch.
+      writeBlockStyle({
+        textStyleType: option.value as TextStyleDeclaration['textStyleType'],
+        ...CLEARED_TYPOGRAPHY,
+      });
       item.isSelected = true;
     } else {
       item.isSelected = false;
@@ -787,6 +836,12 @@ const clickOutsideHyperlink = (event: Event) => {
   }
 };
 
+const clickOutsideStyleModified = (event: Event) => {
+  if (isOutside(event, '.style-modified-popup')) {
+    isStyleModifiedPopupOpen.value = false;
+  }
+};
+
 // Handle link type selection
 const onSelectLinkType = (option: ButtonGroupOption) => {
   const isPageOption = option.value === HYPERLINK_TYPE.page;
@@ -820,8 +875,10 @@ const {
   letterSpacingValue,
   lineHeightValue,
   setInitialStyleSettings,
-  copyGlobalStyleSettings,
-  unsetAllMarks,
+  hasTypographyOverride,
+  canApplyTypographyToRole,
+  resetTypographyToRole,
+  applyTypographyToRole,
   handleHyperlink,
   hyperlinkValue,
   setHyperlinkUrlValue,
@@ -942,13 +999,32 @@ const getSlugFromPageIdHref = (href: string): string => {
   @apply tw-border-grayscale-600;
 }
 .style-editor {
-  @apply tw-flex tw-flex-row tw-flex-wrap;
+  /* Spacing lives here: equal padding + gap. Items carry no margin/padding of their own. */
+  @apply tw-flex tw-flex-row tw-flex-wrap tw-gap-1 tw-p-1;
 }
 .style-editor ::v-deep button:not(.c-button-style) {
   @apply tw-flex tw-px-2 tw-justify-center;
 }
 .style-editor-button {
-  @apply tw-pl-1 tw-pt-1 tw-cursor-pointer;
+  @apply tw-cursor-pointer;
+}
+/* Role + font selectors evenly split the toolbar's first row at every width; the
+   conditional reset tool (roller-brush) sits between them and takes only its own width
+   while shown (it collapses otherwise, so the selectors fill the row).
+   min-width:0 lets them shrink below their content so they never wrap to a second line —
+   the dropdown title truncates instead. */
+.style-editor-button-textstyle,
+.style-editor-button-font {
+  flex: 1 1 0;
+  min-width: 0;
+}
+/* The size stepper leads the formatting row (with the icons), so it sits at a fixed width
+   instead of growing. */
+.style-editor-button.stepper {
+  flex: 0 0 auto;
+  /* Two 30px −/+ buttons plus the 28px 3-digit input. A narrower box can't shrink the
+     stepper — its + button paints over the colour picker instead. */
+  width: 88px;
 }
 .toolbar-editor-button.active {
   @apply tw-font-bold;
@@ -958,7 +1034,7 @@ const getSlugFromPageIdHref = (href: string): string => {
   height: 32px;
   width: 32px;
   border-radius: 4px;
-  @apply tw-flex tw-justify-center tw-items-center tw-my-1 tw-ml-1 tw-cursor-pointer;
+  @apply tw-flex tw-justify-center tw-items-center tw-cursor-pointer;
 }
 ::v-deep .ProseMirror {
   border-top: 1px solid #ccc;
@@ -990,17 +1066,16 @@ const getSlugFromPageIdHref = (href: string): string => {
   font-family: 'Lato' !important;
 }
 
-::v-deep .ProseMirror a s,
-::v-deep .ProseMirror a strike,
-::v-deep .ProseMirror a [data-strike] {
-  text-decoration: line-through !important;
+/* A link shows only the decoration it stores (its `<u>`), as on the published page, whose base
+   styles give `a` `text-decoration: inherit`; the browser default would underline every link. */
+::v-deep .ProseMirror a {
+  text-decoration: inherit !important;
 }
 
 ::v-deep .ProseMirror a,
 ::v-deep .ProseMirror a * {
   /* Keep in sync with DEFAULT_LINK_COLOR (src/constants/rich-text-editor.constants.ts) — scoped CSS can't import it. */
   color: #0097d7 !important;
-  text-decoration: underline !important;
 }
 
 .error-message {
@@ -1014,6 +1089,28 @@ const getSlugFromPageIdHref = (href: string): string => {
   right: 8%;
 }
 
+/* The toggle's own positioning context, so the popup below it doesn't turn `.style-editor`
+   into a containing block (which would squash the colour-picker popup). */
+.style-modified-anchor {
+  @apply tw-inline-flex;
+  position: relative;
+}
+.style-modified-toggle {
+  @apply tw-border tw-border-solid tw-border-grayscale-400 tw-bg-white;
+}
+.style-modified-anchor--hidden {
+  display: none;
+}
+/* Hangs just below the toggle (its row), floating over the rows beneath rather than sitting
+   at the toolbar's bottom. Centred on the toggle by default; the inline `left` also clamps
+   it inside the toolbar when the toggle sits too near an edge (keep width in sync with
+   STYLE_MODIFIED_POPUP_WIDTH). */
+.style-modified-popup {
+  @apply tw-absolute tw-z-20;
+  top: calc(100% + 6px);
+  width: 300px;
+}
+
 .hyperlink-preview {
   @apply tw-absolute;
   z-index: 10;
@@ -1050,54 +1147,10 @@ const getSlugFromPageIdHref = (href: string): string => {
 }
 
 @media (max-width: 399px) {
-  .style-editor-button-font,
-  .style-editor-button-textstyle {
-    max-width: 48%;
-    @apply tw-pb-1;
-  }
-  .style-editor-button.stepper {
-    max-width: 40%;
-  }
-  .style-editor-button-stepper {
-    max-width: 100%;
-  }
-  .border.desktop {
-    display: none;
-  }
-  .border.mobile {
-    display: block;
-  }
-  ::v-deep .left-align {
-    transform: translateX(-48%);
-  }
   .hyperlink-popup {
     z-index: 10000 !important;
   }
 }
-
-@media (min-width: 400px) {
-  .style-editor-button.stepper {
-    max-width: 32%;
-  }
-  .style-editor-button-font {
-    max-width: 28%;
-  }
-  .style-editor-button-stepper {
-    max-width: 100%;
-  }
-  .style-editor-button-textstyle {
-    max-width: 25%;
-  }
-  .border.desktop {
-    display: block;
-  }
-  .border.mobile {
-    display: none;
-  }
-  ::v-deep .left-align {
-    transform: translateX(-25%);
-  }
-}
 .drop-down-item:hover {
   background-color: #eee;
 }