fix(ui): minor issues with tabs and publish buttons when in RTL (#11282)

Fixes https://github.com/payloadcms/payload/issues/11162

Our tabs had wrong spacing in RTL.

The publish button with its dropdown had its borders and border radiuses
on the wrong side for RTL and fixed a minor issue in website template
around RTL margins.

Now publish button looks as expected in RTL:

![image](https://github.com/user-attachments/assets/023d27c9-dc14-4aa1-a5e7-b48f498921fd)

packages/ui/src/elements/Button/index.scss

@@ -68,11 +68,20 @@
       background-color: var(--bg-color);
       box-shadow: var(--box-shadow);
       border-radius: $style-radius-m;
-      border-left: 1px solid var(--theme-bg);
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
       align-items: center;
 
+      html:not([dir='RTL']) & {
+        border-left: 1px solid var(--theme-bg);
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      html[dir='RTL'] & {
+        border-right: 1px solid var(--theme-bg);
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
       &:hover,
       &:focus-visible,
       &:focus,
@@ -236,8 +245,15 @@
     }
 
     &--withPopup .btn {
-      border-top-right-radius: 0;
+      html:not([dir='RTL']) & {
-      border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      html[dir='RTL'] & {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
     }
 
     &--style-icon-label,

packages/ui/src/fields/Tabs/Tab/index.scss

@@ -6,7 +6,8 @@
     @extend %h4;
     display: flex;
     padding-bottom: base(1);
-    margin: 0 $baseline 0 0;
+    margin: 0;
+    margin-inline-end: $baseline;
     cursor: pointer;
     opacity: 0.5;
     position: relative;

templates/website/src/blocks/ArchiveBlock/Component.tsx

@@ -56,7 +56,7 @@ export const ArchiveBlock: React.FC<
     <div className="my-16" id={`block-${id}`}>
       {introContent && (
         <div className="container mb-16">
-          <RichText className="ml-0 max-w-[48rem]" data={introContent} enableGutter={false} />
+          <RichText className="ms-0 max-w-[48rem]" data={introContent} enableGutter={false} />
         </div>
       )}
       <CollectionArchive posts={posts} />

templates/with-vercel-website/src/blocks/ArchiveBlock/Component.tsx

@@ -56,7 +56,7 @@ export const ArchiveBlock: React.FC<
     <div className="my-16" id={`block-${id}`}>
       {introContent && (
         <div className="container mb-16">
-          <RichText className="ml-0 max-w-[48rem]" data={introContent} enableGutter={false} />
+          <RichText className="ms-0 max-w-[48rem]" data={introContent} enableGutter={false} />
         </div>
       )}
       <CollectionArchive posts={posts} />