@wordpress/edit-site 6.8.8 → 6.10.0

package/build-style/style-rtl.css

@@ -30,6 +30,9 @@
 /**
  * Fonts & basic variables.
  */
+/**
+ * Typography
+ */
 /**
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
@@ -44,7 +47,10 @@
  * Dimensions.
  */
 /**
- * Editor widths.
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
  */
 /**
  * Block & Editor UI.
@@ -68,6 +74,9 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Typography
+ */
 /**
  * Breakpoint mixins
  */
@@ -357,7 +366,6 @@
 }
 
 .dataviews-filters__search-widget-listbox {
-  max-height: 184px;
   padding: 4px;
   overflow: auto;
 }
@@ -577,11 +585,10 @@
   margin: 0;
 }
 
-.dataviews-view-config .components-popover__content {
+.dataviews-view-config {
   width: 320px;
   /* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
   container-type: inline-size;
-  padding: 16px;
   font-size: 13px;
   line-height: 1.4;
 }
@@ -646,6 +653,15 @@
   top: unset;
 }
 
+.dataforms-layouts-panel__field-dropdown .dataforms-combined-edit {
+  border: none;
+  padding: 0;
+}
+
+.dataforms-combined-edit__field {
+  flex: 1 1 auto;
+}
+
 .dataviews-view-grid {
   margin-bottom: auto;
   grid-template-rows: max-content;
@@ -811,44 +827,31 @@ ul.dataviews-view-list {
 }
 .dataviews-view-list li {
   margin: 0;
-  cursor: pointer;
   border-top: 1px solid #f0f0f0;
 }
 .dataviews-view-list li .dataviews-view-list__item-wrapper {
   position: relative;
-  border-radius: 4px;
-}
-.dataviews-view-list li .dataviews-view-list__item-wrapper > * {
-  width: 100%;
+  padding: 16px 24px;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions {
-  position: absolute;
-  top: 16px;
-  left: 0;
+  flex: 0;
+  overflow: hidden;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions > div {
   height: 24px;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions .components-button {
+  position: relative;
+  z-index: 1;
   opacity: 0;
 }
-.dataviews-view-list li:has(.dataviews-view-list__fields:empty) .dataviews-view-list__item-actions {
-  top: 50%;
-  transform: translateY(-50%);
+.dataviews-view-list li:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions {
+  flex-basis: min-content;
+  overflow: unset;
+  margin-inline: 8px 0;
 }
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions {
-  background: #f8f8f8;
-  padding-right: 8px;
-  margin-left: 24px;
-  box-shadow: 12px 0 8px 0 #f8f8f8;
-}
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions .components-button, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions .components-button, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions .components-button {
+.dataviews-view-list li:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions .components-button {
   opacity: 1;
-  position: static;
-}
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions {
-  background-color: #f7f8ff;
-  box-shadow: 12px 0 8px 0 #f7f8ff;
 }
 .dataviews-view-list li.is-selected.is-selected {
   border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
@@ -881,26 +884,36 @@ ul.dataviews-view-list {
   color: var(--wp-admin-theme-color);
 }
 .dataviews-view-list .dataviews-view-list__item {
-  box-sizing: border-box;
-  padding: 16px 24px;
-  width: 100%;
+  position: absolute;
+  z-index: 1;
+  inset: 0;
   scroll-margin: 8px 0;
+  appearance: none;
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+}
+.dataviews-view-list .dataviews-view-list__item:focus-visible {
+  outline: none;
 }
 .dataviews-view-list .dataviews-view-list__item:focus-visible::before {
   position: absolute;
   content: "";
-  top: var(--wp-admin-border-width-focus);
-  left: var(--wp-admin-border-width-focus);
-  bottom: var(--wp-admin-border-width-focus);
-  right: var(--wp-admin-border-width-focus);
+  inset: var(--wp-admin-border-width-focus);
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   border-radius: 2px;
+  outline: 2px solid transparent;
 }
-.dataviews-view-list .dataviews-view-list__item .dataviews-view-list__primary-field {
+.dataviews-view-list .dataviews-view-list__primary-field {
+  flex: 1;
   min-height: 24px;
   line-height: 24px;
   overflow: hidden;
 }
+.dataviews-view-list .dataviews-view-list__primary-field:has(a, button) {
+  z-index: 1;
+}
 .dataviews-view-list .dataviews-view-list__media-wrapper {
   width: 52px;
   height: 52px;
@@ -932,6 +945,7 @@ ul.dataviews-view-list {
 }
 .dataviews-view-list .dataviews-view-list__field-wrapper {
   min-height: 52px;
+  flex-grow: 1;
 }
 .dataviews-view-list .dataviews-view-list__fields {
   color: #757575;
@@ -1139,8 +1153,7 @@ ul.dataviews-view-list {
   align-items: center;
   padding: 6px 0;
   line-height: 20px;
-  -webkit-hyphens: auto;
-          hyphens: auto;
+  hyphens: auto;
 }
 
 .dataforms-layouts-panel__field-control {
@@ -1763,12 +1776,7 @@ ul.dataviews-view-list {
   flex-direction: column;
   min-height: 100%;
 }
-.edit-site-global-styles-sidebar__panel, .edit-site-global-styles-sidebar__navigator-provider {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-.edit-site-global-styles-sidebar__navigator-screen {
+.edit-site-global-styles-sidebar__panel {
   flex: 1;
 }
 
@@ -2358,13 +2366,16 @@ ul.dataviews-view-list {
     width: calc(100% - 16px);
   }
   .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
-    transition: border-radius 0.4s;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
+    transition: border-radius, box-shadow 0.4s;
     overflow: hidden;
   }
   .edit-site-layout:not(.is-full-canvas) .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
     border-radius: 8px;
   }
+  .edit-site-layout__canvas .edit-site-resizable-frame__inner-content:hover {
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02);
+  }
 }
 .edit-site-layout.is-full-canvas .edit-site-layout__canvas {
   top: 0;
@@ -2478,6 +2489,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   flex-grow: 1;
   margin: 0;
   overflow: hidden;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
 }
 @media (min-width: 782px) {
   .edit-site-layout__area {
@@ -2530,7 +2542,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _ngjuq_slide-from-right {
+@keyframes _s81uu_slide-from-right {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2540,7 +2552,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _ngjuq_slide-from-left {
+@keyframes _s81uu_slide-from-left {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2596,10 +2608,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _ngjuq_slide-from-left;
+  animation-name: _s81uu_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _ngjuq_slide-from-right;
+  animation-name: _s81uu_slide-from-right;
 }
 
 .edit-site-sidebar-button {
@@ -2614,7 +2626,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 3px solid transparent;
 }
-.edit-site-sidebar-button:hover, .edit-site-sidebar-button:focus-visible, .edit-site-sidebar-button:focus, .edit-site-sidebar-button:not([aria-disabled=true]):active, .edit-site-sidebar-button[aria-expanded=true] {
+.edit-site-sidebar-button:hover:not(:disabled, [aria-disabled=true]), .edit-site-sidebar-button:focus-visible, .edit-site-sidebar-button:focus, .edit-site-sidebar-button:not(:disabled, [aria-disabled=true]):active, .edit-site-sidebar-button[aria-expanded=true] {
   color: #f0f0f0;
 }
 
@@ -2709,7 +2721,9 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 .edit-site-sidebar-navigation-screen__title {
   flex-grow: 1;
   overflow-wrap: break-word;
-  padding: 2px 0 0 0;
+}
+.edit-site-sidebar-navigation-screen__title.edit-site-sidebar-navigation-screen__title, .edit-site-sidebar-navigation-screen__title.edit-site-sidebar-navigation-screen__title .edit-site-sidebar-navigation-screen__title {
+  line-height: 32px;
 }
 
 .edit-site-sidebar-navigation-screen__actions {
@@ -3011,10 +3025,15 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
 }
 
-.edit-site-style-book__tabs [role=tablist] {
+.edit-site-style-book__tablist-container {
   background: #fff;
-  color: #1e1e1e;
+  width: 100%;
+  padding-left: 56px;
+  display: flex;
+  position: absolute;
+  z-index: 1;
 }
+
 .edit-site-style-book__tabs [role=tabpanel] {
   bottom: 0;
   right: 0;
@@ -3053,8 +3072,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 .edit-site-editor-canvas-container__close-button {
   position: absolute;
   left: 8px;
-  top: 6px;
-  z-index: 1;
+  top: 8px;
+  z-index: 2;
   background: #fff;
 }
 
@@ -3323,7 +3342,7 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   padding-bottom: 16px;
 }
 
-.font-library-modal__tablist {
+.font-library-modal__tablist-container {
   position: sticky;
   top: 0;
   border-bottom: 1px solid #ddd;
@@ -3332,6 +3351,9 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   padding: 0 16px;
   z-index: 1;
 }
+.font-library-modal__tablist-container [role=tablist] {
+  margin-bottom: -1px;
+}
 
 .font-library-modal__upload-area {
   align-items: center;

package/build-style/style.css

@@ -30,6 +30,9 @@
 /**
  * Fonts & basic variables.
  */
+/**
+ * Typography
+ */
 /**
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
@@ -44,7 +47,10 @@
  * Dimensions.
  */
 /**
- * Editor widths.
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
  */
 /**
  * Block & Editor UI.
@@ -68,6 +74,9 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Typography
+ */
 /**
  * Breakpoint mixins
  */
@@ -357,7 +366,6 @@
 }
 
 .dataviews-filters__search-widget-listbox {
-  max-height: 184px;
   padding: 4px;
   overflow: auto;
 }
@@ -577,11 +585,10 @@
   margin: 0;
 }
 
-.dataviews-view-config .components-popover__content {
+.dataviews-view-config {
   width: 320px;
   /* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
   container-type: inline-size;
-  padding: 16px;
   font-size: 13px;
   line-height: 1.4;
 }
@@ -646,6 +653,15 @@
   top: unset;
 }
 
+.dataforms-layouts-panel__field-dropdown .dataforms-combined-edit {
+  border: none;
+  padding: 0;
+}
+
+.dataforms-combined-edit__field {
+  flex: 1 1 auto;
+}
+
 .dataviews-view-grid {
   margin-bottom: auto;
   grid-template-rows: max-content;
@@ -811,44 +827,31 @@ ul.dataviews-view-list {
 }
 .dataviews-view-list li {
   margin: 0;
-  cursor: pointer;
   border-top: 1px solid #f0f0f0;
 }
 .dataviews-view-list li .dataviews-view-list__item-wrapper {
   position: relative;
-  border-radius: 4px;
-}
-.dataviews-view-list li .dataviews-view-list__item-wrapper > * {
-  width: 100%;
+  padding: 16px 24px;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions {
-  position: absolute;
-  top: 16px;
-  right: 0;
+  flex: 0;
+  overflow: hidden;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions > div {
   height: 24px;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions .components-button {
+  position: relative;
+  z-index: 1;
   opacity: 0;
 }
-.dataviews-view-list li:has(.dataviews-view-list__fields:empty) .dataviews-view-list__item-actions {
-  top: 50%;
-  transform: translateY(-50%);
+.dataviews-view-list li:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions {
+  flex-basis: min-content;
+  overflow: unset;
+  margin-inline: 8px 0;
 }
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions {
-  background: #f8f8f8;
-  padding-left: 8px;
-  margin-right: 24px;
-  box-shadow: -12px 0 8px 0 #f8f8f8;
-}
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions .components-button, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions .components-button, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions .components-button {
+.dataviews-view-list li:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions .components-button {
   opacity: 1;
-  position: static;
-}
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions {
-  background-color: #f7f8ff;
-  box-shadow: -12px 0 8px 0 #f7f8ff;
 }
 .dataviews-view-list li.is-selected.is-selected {
   border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
@@ -881,26 +884,36 @@ ul.dataviews-view-list {
   color: var(--wp-admin-theme-color);
 }
 .dataviews-view-list .dataviews-view-list__item {
-  box-sizing: border-box;
-  padding: 16px 24px;
-  width: 100%;
+  position: absolute;
+  z-index: 1;
+  inset: 0;
   scroll-margin: 8px 0;
+  appearance: none;
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+}
+.dataviews-view-list .dataviews-view-list__item:focus-visible {
+  outline: none;
 }
 .dataviews-view-list .dataviews-view-list__item:focus-visible::before {
   position: absolute;
   content: "";
-  top: var(--wp-admin-border-width-focus);
-  right: var(--wp-admin-border-width-focus);
-  bottom: var(--wp-admin-border-width-focus);
-  left: var(--wp-admin-border-width-focus);
+  inset: var(--wp-admin-border-width-focus);
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   border-radius: 2px;
+  outline: 2px solid transparent;
 }
-.dataviews-view-list .dataviews-view-list__item .dataviews-view-list__primary-field {
+.dataviews-view-list .dataviews-view-list__primary-field {
+  flex: 1;
   min-height: 24px;
   line-height: 24px;
   overflow: hidden;
 }
+.dataviews-view-list .dataviews-view-list__primary-field:has(a, button) {
+  z-index: 1;
+}
 .dataviews-view-list .dataviews-view-list__media-wrapper {
   width: 52px;
   height: 52px;
@@ -932,6 +945,7 @@ ul.dataviews-view-list {
 }
 .dataviews-view-list .dataviews-view-list__field-wrapper {
   min-height: 52px;
+  flex-grow: 1;
 }
 .dataviews-view-list .dataviews-view-list__fields {
   color: #757575;
@@ -1139,8 +1153,7 @@ ul.dataviews-view-list {
   align-items: center;
   padding: 6px 0;
   line-height: 20px;
-  -webkit-hyphens: auto;
-          hyphens: auto;
+  hyphens: auto;
 }
 
 .dataforms-layouts-panel__field-control {
@@ -1764,12 +1777,7 @@ ul.dataviews-view-list {
   flex-direction: column;
   min-height: 100%;
 }
-.edit-site-global-styles-sidebar__panel, .edit-site-global-styles-sidebar__navigator-provider {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-.edit-site-global-styles-sidebar__navigator-screen {
+.edit-site-global-styles-sidebar__panel {
   flex: 1;
 }
 
@@ -2359,13 +2367,16 @@ ul.dataviews-view-list {
     width: calc(100% - 16px);
   }
   .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
-    transition: border-radius 0.4s;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
+    transition: border-radius, box-shadow 0.4s;
     overflow: hidden;
   }
   .edit-site-layout:not(.is-full-canvas) .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
     border-radius: 8px;
   }
+  .edit-site-layout__canvas .edit-site-resizable-frame__inner-content:hover {
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02);
+  }
 }
 .edit-site-layout.is-full-canvas .edit-site-layout__canvas {
   top: 0;
@@ -2479,6 +2490,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   flex-grow: 1;
   margin: 0;
   overflow: hidden;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
 }
 @media (min-width: 782px) {
   .edit-site-layout__area {
@@ -2531,7 +2543,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _ngjuq_slide-from-right {
+@keyframes _s81uu_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2541,7 +2553,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _ngjuq_slide-from-left {
+@keyframes _s81uu_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2597,10 +2609,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _ngjuq_slide-from-left;
+  animation-name: _s81uu_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _ngjuq_slide-from-right;
+  animation-name: _s81uu_slide-from-right;
 }
 
 .edit-site-sidebar-button {
@@ -2615,7 +2627,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 3px solid transparent;
 }
-.edit-site-sidebar-button:hover, .edit-site-sidebar-button:focus-visible, .edit-site-sidebar-button:focus, .edit-site-sidebar-button:not([aria-disabled=true]):active, .edit-site-sidebar-button[aria-expanded=true] {
+.edit-site-sidebar-button:hover:not(:disabled, [aria-disabled=true]), .edit-site-sidebar-button:focus-visible, .edit-site-sidebar-button:focus, .edit-site-sidebar-button:not(:disabled, [aria-disabled=true]):active, .edit-site-sidebar-button[aria-expanded=true] {
   color: #f0f0f0;
 }
 
@@ -2710,7 +2722,9 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 .edit-site-sidebar-navigation-screen__title {
   flex-grow: 1;
   overflow-wrap: break-word;
-  padding: 2px 0 0 0;
+}
+.edit-site-sidebar-navigation-screen__title.edit-site-sidebar-navigation-screen__title, .edit-site-sidebar-navigation-screen__title.edit-site-sidebar-navigation-screen__title .edit-site-sidebar-navigation-screen__title {
+  line-height: 32px;
 }
 
 .edit-site-sidebar-navigation-screen__actions {
@@ -3012,10 +3026,15 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
 }
 
-.edit-site-style-book__tabs [role=tablist] {
+.edit-site-style-book__tablist-container {
   background: #fff;
-  color: #1e1e1e;
+  width: 100%;
+  padding-right: 56px;
+  display: flex;
+  position: absolute;
+  z-index: 1;
 }
+
 .edit-site-style-book__tabs [role=tabpanel] {
   bottom: 0;
   left: 0;
@@ -3054,8 +3073,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 .edit-site-editor-canvas-container__close-button {
   position: absolute;
   right: 8px;
-  top: 6px;
-  z-index: 1;
+  top: 8px;
+  z-index: 2;
   background: #fff;
 }
 
@@ -3324,7 +3343,7 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   padding-bottom: 16px;
 }
 
-.font-library-modal__tablist {
+.font-library-modal__tablist-container {
   position: sticky;
   top: 0;
   border-bottom: 1px solid #ddd;
@@ -3333,6 +3352,9 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   padding: 0 16px;
   z-index: 1;
 }
+.font-library-modal__tablist-container [role=tablist] {
+  margin-bottom: -1px;
+}
 
 .font-library-modal__upload-area {
   align-items: center;