Fix horizontal scrollbar, rearrange error and copy icons in cells

inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationCell.tsx

@@ -251,6 +251,33 @@ const ItemNumberCell = React.memo(({
   return (
     <TableCell className="p-1 group relative" style={{ width: `${width}px`, minWidth: `${width}px`, maxWidth: `${width}px`, boxSizing: 'border-box' }}>
       <div className={`relative ${hasError || isRequiredButEmpty ? 'border-red-500' : ''}`}>
+        {shouldShowErrorIcon && (
+          <div className="absolute right-1.5 top-1/2 -translate-y-1/2 z-20">
+            <ValidationIcon error={{ 
+              message: errorMessages, 
+              level: 'error' 
+            }} />
+          </div>
+        )}
+        {!shouldShowErrorIcon && copyDown && !isEmpty(displayValue) && (
+          <div className="absolute right-1.5 top-1/2 -translate-y-1/2 z-20 opacity-0 group-hover:opacity-100 transition-opacity">
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button 
+                    onClick={copyDown}
+                    className="p-1 rounded-sm hover:bg-muted text-muted-foreground/50 hover:text-foreground"
+                  >
+                    <ArrowDown className="h-3.5 w-3.5" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Copy value to all cells below</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+        )}
         {isValidating ? (
           <div className="flex items-center justify-center gap-2">
             <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
@@ -267,33 +294,6 @@ const ItemNumberCell = React.memo(({
             />
           </div>
         )}
-        {shouldShowErrorIcon && (
-          <div className="absolute right-2 top-1/2 -translate-y-1/2 z-20">
-            <ValidationIcon error={{ 
-              message: errorMessages, 
-              level: 'error' 
-            }} />
-          </div>
-        )}
-        {copyDown && (
-          <div className="absolute right-2 top-1/2 -translate-y-1/2 z-20 opacity-0 group-hover:opacity-100 transition-opacity">
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button 
-                    onClick={copyDown}
-                    className="ml-1 p-1 rounded-sm hover:bg-gray-100 text-gray-500 hover:text-gray-700"
-                  >
-                    <ArrowDown className="h-3 w-3" />
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>Copy value to all cells below</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          </div>
-        )}
       </div>
     </TableCell>
   );
@@ -367,6 +367,33 @@ const ValidationCell = ({
   return (
     <TableCell className="p-1 group relative" style={{ width: `${width}px`, minWidth: `${width}px`, maxWidth: `${width}px`, boxSizing: 'border-box' }}>
       <div className={`relative ${hasError || isRequiredButEmpty ? 'border-red-500' : ''}`}>
+        {shouldShowErrorIcon && (
+          <div className="absolute right-1.5 top-1/2 -translate-y-1/2 z-20">
+            <ValidationIcon error={{ 
+              message: errorMessages, 
+              level: 'error' 
+            }} />
+          </div>
+        )}
+        {!shouldShowErrorIcon && copyDown && !isEmpty(value) && (
+          <div className="absolute right-0.5 top-1/2 -translate-y-1/2 z-20 opacity-0 group-hover:opacity-100 transition-opacity">
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button 
+                    onClick={copyDown}
+                    className="p-1 rounded-full hover:bg-muted text-muted-foreground/50 hover:text-foreground"
+                  >
+                    <ArrowDown className="h-3.5 w-3.5" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Copy value to all cells below</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+        )}
         {isValidating ? (
           <div className="flex items-center justify-center gap-2">
             <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
@@ -383,33 +410,6 @@ const ValidationCell = ({
             />
           </div>
         )}
-        {shouldShowErrorIcon && (
-          <div className="absolute right-2 top-1/2 -translate-y-1/2 z-20">
-            <ValidationIcon error={{ 
-              message: errorMessages, 
-              level: 'error' 
-            }} />
-          </div>
-        )}
-        {copyDown && (
-          <div className="absolute right-2 top-1/2 -translate-y-1/2 z-20 opacity-0 group-hover:opacity-100 transition-opacity">
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button 
-                    onClick={copyDown}
-                    className="ml-1 p-1 rounded-sm hover:bg-gray-100 text-gray-500 hover:text-gray-700"
-                  >
-                    <ArrowDown className="h-3 w-3" />
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>Copy value to all cells below</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          </div>
-        )}
       </div>
     </TableCell>
   );

inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx

@@ -1039,18 +1039,17 @@ const ValidationContainer = <T extends string>({
               {/* Main table section */}
               <div className="px-8 pb-6 flex-1 min-h-0">
                 <div className="rounded-md border h-full flex flex-col overflow-hidden">
-                  <div className="flex-1 overflow-hidden">
+                  <div className="flex-1 overflow-hidden w-full">
                     <div 
                       ref={scrollContainerRef}
-                      className="overflow-auto max-h-[calc(100vh-300px)] w-full"
+                      className="overflow-auto max-h-[calc(100vh-320px)] w-full"
                       style={{ 
                         willChange: 'transform',
                         position: 'relative',
                         WebkitOverflowScrolling: 'touch', // Improve scroll performance on Safari
                         overscrollBehavior: 'contain', // Prevent scroll chaining
                         contain: 'paint', // Improve performance for sticky elements
-                        scrollbarWidth: 'thin' // Thinner scrollbars in Firefox
-                      }}
+                         }}
                       onScroll={handleScroll}
                     >
                       {renderValidationTable}

inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/MultiInputCell.tsx

@@ -414,7 +414,7 @@ const MultiInputCell = <T extends string>({
                   </>
                 )}
               </div>
-              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              <ChevronsUpDown className="mx-2 h-4 w-4 shrink-0 opacity-50" />
             </div>
           </Button>
         </PopoverTrigger>

inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/SelectCell.tsx

@@ -177,7 +177,7 @@ const SelectCell = <T extends string>({
           <span className={isProcessing ? "opacity-70" : ""}>
             {displayValue}
           </span>
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <ChevronsUpDown className="mr-1.5 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
       <PopoverContent 

inventory/src/pages/Import.tsx

@@ -62,7 +62,7 @@ const BASE_IMPORT_FIELDS = [
     description: "Universal Product Code/Barcode",
     alternateMatches: ["barcode", "bar code", "jan", "ean", "upc code"],
     fieldType: { type: "input" },
-    width: 140,
+    width: 145,
     validations: [
       { rule: "required", errorMessage: "Required", level: "error" },
       { rule: "unique", errorMessage: "Must be unique", level: "error" },