style(webapp): line the chart tab bar up with the plain card title

Doubles the tab bar's left padding to pl-4, which is also what the
non-tabbed `Card.Header` uses - so a tabbed chart title and a plain one
start at the same place.

Author: samejr

apps/webapp/app/components/primitives/charts/ChartCard.tsx

@@ -89,7 +89,7 @@ export function ChartCard({
     <div ref={containerRef} className="group h-full min-h-0 overflow-hidden">
       <Card className={cn("h-full overflow-hidden px-0 pb-2", tabbed ? "pt-0" : "pt-3", className)}>
         {tabbed ? (
-          <div className={cn(TITLE_BAR_CHROME, "items-stretch justify-between gap-x-0 px-2")}>
+          <div className={cn(TITLE_BAR_CHROME, "items-stretch justify-between gap-x-0 pl-4 pr-2")}>
             <div className="flex items-stretch gap-x-4">{title}</div>
             {maximizable && <div className="flex items-center">{maximizeButton}</div>}
           </div>

apps/webapp/app/routes/storybook.tabs/route.tsx

@@ -206,7 +206,7 @@ function TitleTabButtons({ layoutId, size }: { layoutId: string; size?: "base" |
   const [active, setActive] = useState("first");
 
   return (
-    <TabContainer variant="title" className="justify-start gap-x-4 px-2">
+    <TabContainer variant="title" className="justify-start gap-x-4 pl-4 pr-2">
       {["first", "second"].map((value) => (
         <TabButton
           key={value}