From 8a3bc53832f082cfc6ac18d7b508c50e37ae901b Mon Sep 17 00:00:00 2001
From: Will Chen <willchen90@gmail.com>
Date: Tue, 28 Oct 2025 10:44:23 -0700
Subject: [PATCH] Make action header more horizontally dense (#1629)

<!-- CURSOR_SUMMARY -->
> [!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>
<!-- /CURSOR_SUMMARY -->
---
 src/components/preview_panel/ActionHeader.tsx | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/preview_panel/ActionHeader.tsx b/src/components/preview_panel/ActionHeader.tsx
index 998eaa9..7694e6f 100644
--- 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}
-        {!isCompact && <span>{text}</span>}
-        {badge}
+        <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",
           )}