Make action header more horizontally dense (#1629)

 > [!NOTE] > Make preview header buttons more horizontally dense by stacking label/badge under smaller icons and standardizing icon size. > > - **UI (ActionHeader)**: > - **Button layout**: > - Replace shared `BUTTON_CLASS_NAME` with inline classes to reduce padding, gap, and font size; use `flex-col` for stacked icon/label. > - Wrap label and badge in a single `span` for tighter vertical grouping. > - **Icons**: > - Introduce `iconSize = 15` and apply to `Eye`, `AlertTriangle`, `Code`, `Wrench`, `Globe` for consistent sizing. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 9cfe3ba52b79c9176289d077ffcbaf57b1613f44. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>

Make action header more horizontally dense (#1629)
8a3bc538 · Will Chen · GitHub · f7132d0d · 8a3bc538
--- a/src/components/preview_panel/ActionHeader.tsx
+++ b/src/components/preview_panel/ActionHeader.tsx
@@ -41,9 +41,6 @@ export type PreviewMode =
  | "configure"
  | "publish";

-const BUTTON_CLASS_NAME =
-  "no-app-region-drag cursor-pointer relative flex items-center gap-1 px-2 py-1 rounded-md text-[13px] font-medium z-10 hover:bg-[var(--background)]";
-
 // Preview Header component with preview mode toggle
 export const ActionHeader = () => {
  const [previewMode, setPreviewMode] = useAtom(previewModeAtom);
@@ -177,12 +174,14 @@ export const ActionHeader = () => {
      <button
        data-testid={testId}
        ref={ref}
-        className={BUTTON_CLASS_NAME}
+        className="no-app-region-drag cursor-pointer relative flex items-center gap-0.5 px-2 py-0.5 rounded-md text-xs font-medium z-10 hover:bg-[var(--background)] flex-col"
        onClick={() => selectPanel(mode)}
      >
        {icon}
+        <span>
          {!isCompact && <span>{text}</span>}
          {badge}
+        </span>
      </button>
    );

@@ -199,6 +198,7 @@ export const ActionHeader = () => {

    return buttonContent;
  };
+  const iconSize = 15;

  return (
    <TooltipProvider>
@@ -220,14 +220,14 @@ export const ActionHeader = () => {
          {renderButton(
            "preview",
            previewRef,
-            <Eye size={14} />,
+            <Eye size={iconSize} />,
            "Preview",
            "preview-mode-button",
          )}
          {renderButton(
            "problems",
            problemsRef,
-            <AlertTriangle size={14} />,
+            <AlertTriangle size={iconSize} />,
            "Problems",
            "problems-mode-button",
            displayCount && (
@@ -239,21 +239,21 @@ export const ActionHeader = () => {
          {renderButton(
            "code",
            codeRef,
-            <Code size={14} />,
+            <Code size={iconSize} />,
            "Code",
            "code-mode-button",
          )}
          {renderButton(
            "configure",
            configureRef,
-            <Wrench size={14} />,
+            <Wrench size={iconSize} />,
            "Configure",
            "configure-mode-button",
          )}
          {renderButton(
            "publish",
            publishRef,
-            <Globe size={14} />,
+            <Globe size={iconSize} />,
            "Publish",
            "publish-mode-button",
          )}