Update new unified dose management, style/other improvements

src/components/ui/form-numeric-input.tsx

@@ -142,7 +142,7 @@ const FormNumericInput = React.forwardRef<HTMLInputElement, NumericInputProps>(
             variant="outline"
             size="icon"
             className={cn(
-              "h-9 w-9 rounded-r-none",
+              "h-9 w-9 rounded-r-none border-r-0",
               hasError && "border-destructive"
             )}
             onClick={() => updateValue(-1)}
@@ -159,14 +159,28 @@ const FormNumericInput = React.forwardRef<HTMLInputElement, NumericInputProps>(
             onFocus={handleFocus}
             onKeyDown={handleKeyDown}
             className={cn(
-              "w-24",
-              "rounded-none border-x-0 h-9",
+              "w-20 h-9 z-20",
+              "rounded-none",
               getAlignmentClass(),
               hasError && "border-destructive focus-visible:ring-destructive"
             )}
             {...props}
           />
-          {clearButton && allowEmpty ? (
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            className={cn(
+              "h-9 w-9",
+              clearButton && allowEmpty ? "rounded-l-none rounded-r-none border-x-0" : "rounded-l-none border-l-0",
+              hasError && "border-destructive"
+            )}
+            onClick={() => updateValue(1)}
+            tabIndex={-1}
+          >
+            <Plus className="h-4 w-4" />
+          </Button>
+          {clearButton && allowEmpty && (
             <Button
               type="button"
               variant="outline"
@@ -180,20 +194,6 @@ const FormNumericInput = React.forwardRef<HTMLInputElement, NumericInputProps>(
             >
               <X className="h-4 w-4" />
             </Button>
-          ) : (
-            <Button
-              type="button"
-              variant="outline"
-              size="icon"
-              className={cn(
-                "h-9 w-9 rounded-l-none",
-                hasError && "border-destructive"
-              )}
-              onClick={() => updateValue(1)}
-              tabIndex={-1}
-            >
-              <Plus className="h-4 w-4" />
-            </Button>
           )}
         </div>
         {unit && <span className="text-sm text-muted-foreground whitespace-nowrap">{unit}</span>}