improve axis formatting ui

Author: vieiralucas

apps/web/src/components/v2Editor/customBlocks/visualizationV2/FormatControls.tsx

@@ -137,15 +137,13 @@ export const NumberFormatControl = ({
         disabled={!dataframe || !isEditable}
       />
 
-      <div className="mt-4">
-        <AxisModifierSelector
-          label="Separator"
-          value={currentFormat?.separatorStyle || '999,999.99'}
-          options={NUMBER_SEPARATOR_OPTIONS}
-          onChange={(style) => onChangeSeparatorStyle(seriesId, style)}
-          disabled={!dataframe || !isEditable}
-        />
-      </div>
+      <AxisModifierSelector
+        label="Separator"
+        value={currentFormat?.separatorStyle || '999,999.99'}
+        options={NUMBER_SEPARATOR_OPTIONS}
+        onChange={(style) => onChangeSeparatorStyle(seriesId, style)}
+        disabled={!dataframe || !isEditable}
+      />
 
       <div className="mt-4">
         <label

apps/web/src/components/v2Editor/customBlocks/visualizationV2/tabs/XAxisTab.tsx

@@ -266,7 +266,7 @@ const XAxisTab = ({
 
         {/* Date formatting options - only show for date columns */}
         {isDateColumn && (
-          <div className="mb-6 p-4 bg-gray-50 rounded-md">
+          <div className="mb-6 p-4 bg-gray-50 rounded-md border border-gray-200 shadow-sm">
             <h3 className="text-xs font-medium mb-4">Date formatting</h3>
             <DateFormatControl
               currentFormat={xAxisDateFormat}
@@ -281,8 +281,10 @@ const XAxisTab = ({
 
         {/* Number formatting options - only show for number columns */}
         {isNumberColumn && (
-          <div className="mb-6 p-4 bg-gray-50 rounded-md">
-            <h3 className="text-xs font-medium mb-4">Number formatting</h3>
+          <div className="mb-6 p-4 bg-gray-50 rounded-md border border-gray-200 shadow-sm">
+            <h3 className="text-xs font-medium mb-1 text-gray-900">
+              Label formatting
+            </h3>
             <NumberFormatControl
               initialDecimalPlaces={decimalPlacesInput}
               initialMultiplier={multiplierInput}

apps/web/src/components/v2Editor/customBlocks/visualizationV2/tabs/YAxisTab.tsx

@@ -206,12 +206,21 @@ const YAxisSection = ({
         const isNumberType = isNumberSeries(series)
 
         return (
-          <div key={series.id} className="mb-6 p-4 bg-gray-50 rounded-md">
+          <div
+            key={series.id}
+            className="mb-6 p-4 bg-gray-50 rounded-md border border-gray-200 shadow-sm"
+          >
             <div className="flex justify-between items-center mb-4">
-              <h3 className="text-sm font-medium">Series {seriesIndex + 1}</h3>
+              <h2 className="text-sm font-semibold text-gray-900">
+                {axisIndex === 0 ? 'Left' : 'Right'} series {seriesIndex + 1}
+              </h2>
               <span className="text-xs text-gray-500 italic">{columnName}</span>
             </div>
 
+            <h3 className="text-xs font-medium text-gray-900 mb-1">
+              Label formatting
+            </h3>
+
             {isDateType && (
               <DateFormatControl
                 currentFormat={series.dateFormat || null}