refactor(frontend): update SectionAnchorTabs layout and styling

- Changed the layout from equal-width grid to left-aligned flex chips for improved visual alignment.
- Adjusted the active state styling and padding for better user experience.

frontend/src/components/editor/section-anchor-tabs.tsx

@@ -2,7 +2,8 @@
 
 /**
  * Shared underline section tabs for prompt editor and workflow side panels.
- * Equal-width columns; active state is a primary bottom border (not pill Tabs).
+ * Left-aligned flex chips (not equal-width grid); active state is a primary
+ * bottom border (not pill Tabs).
  */
 
 import { cn } from "@/lib/utils";
@@ -31,15 +32,7 @@ export function SectionAnchorTabs({
   if (sections.length === 0) return null;
 
   const list = (
-    <div
+    <div className="flex min-w-max border-b border-hairline">
-      // w-full matters inside overflow-x-auto parents: without it the grid
-      // shrink-wraps to minWidth and tabs look left-clustered.
-      className="grid w-full border-b border-hairline"
-      style={{
-        gridTemplateColumns: `repeat(${sections.length}, minmax(0, 1fr))`,
-        minWidth: `${Math.max(sections.length * 5.6, 12)}rem`,
-      }}
-    >
       {sections.map((section) => {
         const active = activeSectionId === section.id;
 
@@ -50,7 +43,7 @@ export function SectionAnchorTabs({
             aria-current={active ? "location" : undefined}
             onClick={() => onSelect(section.id)}
             className={cn(
-              "-mb-px whitespace-nowrap border-b-2 px-2 py-2.5 text-center text-xs transition-colors sm:px-3 sm:text-sm",
+              "-mb-px min-w-24 whitespace-nowrap border-b-2 px-3 py-2.5 text-center text-xs transition-colors sm:text-sm",
               active
                 ? "border-primary text-foreground"
                 : "border-transparent text-muted-foreground hover:bg-surface-strong/50 hover:text-foreground",