resolve layout issues

webrecorder · Feb 6, 2025 · 3131678 · 3131678
1 parent 40c74eb
commit 3131678
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 6 deletions.
diff --git a/frontend/src/components/ui/tab-group/tab-group.ts b/frontend/src/components/ui/tab-group/tab-group.ts
@@ -29,9 +29,6 @@ export class TabGroup extends TailwindElement {
   @property({ type: String, reflect: false })
   active = "";
 
-  @property({ type: String })
-  overrideTabLayout?: string;
-
   /* Nav placement */
   @property({ type: String })
   placement: "top" | "start" = "top";

diff --git a/frontend/src/features/collections/collection-edit-dialog.ts b/frontend/src/features/collections/collection-edit-dialog.ts
@@ -27,7 +27,6 @@ import {
 } from "@/types/collection";
 import { maxLengthValidator, type MaxLengthValidator } from "@/utils/form";
 import { formatRwpTimestamp } from "@/utils/replay";
-import { tw } from "@/utils/tailwind";
 
 type Tab = "general" | "sharing";
 
@@ -231,11 +230,12 @@ export class CollectionEdit extends BtrixElement {
               >
                 <btrix-tab-group
                   placement="top"
-                  overrideTabLayout=${tw`mb-4 flex gap-2`}
+                  .sticky=${false}
                   active=${this.tab}
                   @btrix-tab-change=${(e: CustomEvent<Tab>) => {
                     this.tab = e.detail;
                   }}
+                  class="part-[content]:pt-4"
                 >
                   ${this.renderTab({
                     panel: "general",

diff --git a/frontend/src/layouts/pageSectionsWithNav.ts b/frontend/src/layouts/pageSectionsWithNav.ts
@@ -27,10 +27,11 @@ export function pageSectionsWithNav({
           sticky && tw`lg:sticky lg:top-2 lg:self-start`,
           placement === "start" ? tw`lg:max-w-[16.5rem]` : tw`lg:flex-row`,
         )}
+        part="tabs"
       >
         ${nav}
       </div>
-      <div class="flex-1">${main}</div>
+      <div class="flex-1" part="content">${main}</div>
     </div>
   `;
 }