make dropzone for available items bigger

web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/StylingLabel.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Text } from '@/components/ui/typography';
+import { cn } from '@/lib/classMerge';
 
 interface StylingLabelProps {
   label: string;
@@ -12,7 +13,7 @@ interface StylingLabelProps {
 export const StylingLabel = React.forwardRef<HTMLDivElement, StylingLabelProps>(
   ({ label, labelExtra, children, className = '', id }, ref) => {
     return (
-      <div className={`flex flex-col space-y-2.5 ${className}`} ref={ref} id={id}>
+      <div className={cn('flex flex-col space-y-2.5', className)} ref={ref} id={id}>
         <div className="flex h-6 items-center justify-between">
           <Text size="sm" variant="secondary">
             {label}

web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/MetricStylingApp.tsx

@@ -96,8 +96,10 @@ export const MetricStylingApp: React.FC<{
         setSegment={setSegment}
         selectedChartType={selectedChartType}
       />
-
-      <ScrollArea className="">
+      {
+        //this crazy css selector is so that the available section has a large dropzone
+      }
+      <ScrollArea className="h-full [&>div>div]:h-full!">
         {segment === MetricStylingAppSegments.VISUALIZE && (
           <StylingAppVisualize
             className="px-4 pt-3"

web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/StylingAppStyling.tsx

@@ -32,7 +32,7 @@ import { StylingAppStylingNotSupported } from './StylingAppStylingNotSupported';
 import { EditScatterDotSize } from './EditScatterDotSize';
 import { useUpdateMetricChart } from '@/context/Metrics';
 
-const sectionClass = 'flex w-full flex-col space-y-3 my-3 ';
+const sectionClass = 'flex w-full flex-col space-y-3 my-3';
 const UNSUPPORTED_CHART_TYPES: ChartType[] = [ChartType.Table, ChartType.Metric];
 
 export const StylingAppStyling: React.FC<{

web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxis.tsx

@@ -59,15 +59,13 @@ export const SelectAxis: React.FC<
   }
 
   return (
-    <div id="select-axis-container">
-      <SelectAxisProvider
-        {...props}
-        selectedAxis={selectedAxis}
-        selectedChartType={selectedChartType}
-        columnMetadata={columnMetadata}>
-        <SelectAxisDropzones items={items} dropZones={dropZones} onChange={onChange} />
-      </SelectAxisProvider>
-    </div>
+    <SelectAxisProvider
+      {...props}
+      selectedAxis={selectedAxis}
+      selectedChartType={selectedChartType}
+      columnMetadata={columnMetadata}>
+      <SelectAxisDropzones items={items} dropZones={dropZones} onChange={onChange} />
+    </SelectAxisProvider>
   );
 });
 SelectAxis.displayName = 'SelectAxis';

web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/SelectAxisDropdownContent.tsx

@@ -257,7 +257,7 @@ const ColumnSettingComponent: React.FC<{
 
   return (
     <>
-      <div className={`${className} flex w-full flex-col space-y-3 overflow-hidden p-3`}>
+      <div className={`${className} swag2 flex w-full flex-col space-y-3 overflow-hidden p-3`}>
         {EnabledComponentsLoop.map(({ enabled, key, Component }) => {
           return <React.Fragment key={key}>{Component}</React.Fragment>;
         })}
@@ -429,7 +429,7 @@ const LabelSettings: React.FC<{
 
   return (
     <ErrorBoundary>
-      <div className={`${className} flex w-full flex-col space-y-3 overflow-hidden p-3`}>
+      <div className={`${className} swag flex w-full flex-col space-y-3 overflow-hidden p-3`}>
         {ComponentsLoop.map(({ key, Component }) => {
           return <React.Fragment key={key}>{Component}</React.Fragment>;
         })}

web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/SelectAxisAvailableItemsList.tsx

@@ -28,22 +28,24 @@ export const AvailableItemsList: React.FC<AvailableItemsListProps> = ({
     (isOver || isActive) && activeZone !== SelectAxisContainerId.Available;
 
   return (
-    <div ref={setNodeRef}>
-      <StylingLabel id="available-items-list" label="Available">
-        <div
-          className={cn(
-            'mb-1',
-            showDeleteHoverState ? 'rounded bg-red-100 shadow-[0_0_3px_1px] shadow-red-300' : ''
-          )}>
-          {items.map((item) => (
-            <SelectAxisSortableItem
-              key={item.id}
-              item={item}
-              zoneId={SelectAxisContainerId.Available}
-            />
-          ))}
-        </div>
-      </StylingLabel>
-    </div>
+    <StylingLabel
+      id="available-items-list"
+      label="Available"
+      className="mb-4 h-full"
+      ref={setNodeRef}>
+      <div
+        className={cn(
+          'mb-1',
+          showDeleteHoverState ? 'rounded bg-red-100 shadow-[0_0_3px_1px] shadow-red-300' : ''
+        )}>
+        {items.map((item) => (
+          <SelectAxisSortableItem
+            key={item.id}
+            item={item}
+            zoneId={SelectAxisContainerId.Available}
+          />
+        ))}
+      </div>
+    </StylingLabel>
   );
 };

web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/SelectAxisDropzones.tsx

@@ -53,7 +53,7 @@ export const SelectAxisDropzones: React.FC<{
       onDragStart={handleDragStart}
       onDragOver={handleDragOver}
       onDragEnd={handleDragEnd}>
-      <div className="flex flex-col gap-4">
+      <div className="mb-2 flex h-full flex-col gap-4">
         {dropZones.map((zone) => (
           <SelectAxisDropZone
             key={zone.id}

web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/StylingAppVisualize.tsx

@@ -14,6 +14,7 @@ import {
 import { ISelectAxisContext } from './SelectAxis/useSelectAxisContext';
 import { StylingMetric } from './StylingMetric';
 import { useMount, useUnmount } from '@/hooks';
+import { cn } from '@/lib/classMerge';
 
 export const StylingAppVisualize: React.FC<
   {
@@ -47,7 +48,7 @@ export const StylingAppVisualize: React.FC<
   const isMetricChart = selectedChartType === ChartType.Metric;
 
   return (
-    <div className={`flex w-full flex-col space-y-3`}>
+    <div className={`flex h-full w-full flex-col space-y-3`}>
       <div className={className}>
         <StylingLabel label="Chart type">
           <SelectChartType
@@ -64,7 +65,7 @@ export const StylingAppVisualize: React.FC<
       </div>
 
       {!isMetricChart && (
-        <div className={className}>
+        <div className={cn(className, 'h-full')}>
           <SelectAxis {...props} />
         </div>
       )}