[6.x] Field toolbar fixes (#12768)

Author: JayGeorge

resources/css/components/fieldtypes/bard.css

@@ -53,7 +53,7 @@
 =================================================== */
 @layer ui {
     .bard-fixed-toolbar {
-        @apply top-0 z-5 flex items-start justify-between rounded-t-[calc(var(--radius-lg)-1px)] border-b border-gray-300 bg-gray-50 p-1 text-sm shadow-none px-2 py-1 dark:border-white/10 dark:bg-gray-925;
+        @apply top-0 flex items-start justify-between rounded-t-[calc(var(--radius-lg)-1px)] border-b border-gray-300 bg-gray-50 p-1 text-sm shadow-none px-2 py-1 dark:border-white/10 dark:bg-gray-925;
 
         .bard-toolbar-button {
             @apply m-0 flex size-8 items-center justify-center rounded-sm px-1 text-center text-base text-gray-900 dark:text-gray-100;

resources/css/components/fieldtypes/grid.css

@@ -13,7 +13,7 @@
         }
 
         thead th {
-            @apply sticky -top-2 table-cell z-10 border-b bg-gray-100/75 p-2 text-sm font-medium text-gray-900 dark:border-gray-700 dark:bg-gray-925 dark:text-gray-100;
+            @apply sticky -top-2 table-cell z-(--z-index-draggable) border-b bg-gray-50 p-2 text-sm font-medium text-gray-900 dark:border-gray-700 dark:bg-gray-925 dark:text-gray-100;
             /* Prevent the sticky toolbar from hitting the very end of container, which causes it to overlap the container's border-radius */
             margin-block-end: 8px;
             /* Pull the subsequent element up to compensate for this */
@@ -41,7 +41,7 @@
 
         /* Grid fieldtype > Bard fieldtype */
         .bard-fixed-toolbar {
-            @apply top-8;
+            @apply top-7;
         }
 
         /* Bard field with a fixed toolbar > Grid fieldtype > Bard fieldtype */

resources/css/components/fieldtypes/markdown.css

@@ -49,10 +49,15 @@
 
 /* Sticky Toolbar
 ========================================================================== */
-
 [data-markdown-toolbar] {
     @apply flex items-center justify-between rounded-t-[calc(var(--radius-lg)-1px)] bg-gray-50 px-2 py-1 overflow-x-auto;
     @apply sticky -top-2 z-8 border-b border-gray-300 dark:border-white/20 dark:border-b-white/10 dark:bg-gray-925;
+    /* Prevent the sticky toolbar from hitting the very end of container, which causes it to overlap the container's border-radius */
+    margin-block-end: 8px;
+    /* Pull the subsequent element up to compensate for this */
+    ~ * {
+        margin-block-start: -8px;
+    }
 }
 
 .grid-cell [data-markdown-toolbar] {