fix: layout of custom url input

Author: SharzyL

frontend/components/PasteSettingPanel.tsx

@@ -101,13 +101,13 @@ export function PanelSettingsPanel({ setting, onSettingChange, config, ...rest }
               errorMessage={verifyName(setting.name)[1]}
               startContent={
                 <div className="pointer-events-none flex items-center">
-                  <span className="text-default-500 text-small w-max">{`${config.DEPLOY_URL}/~`}</span>
+                  <span className="text-default-500 text-sm w-max">{`${config.DEPLOY_URL}/~`}</span>
                 </div>
               }
             />
           ) : null}
           <Radio value="manage" classNames={radioClassNames}>
-            <div className="">Update or delete</div>
+            <div className="">Update or delete an existing paste</div>
           </Radio>
           {setting.uploadKind === "manage" ? (
             <Input

frontend/components/ui/Input.tsx

@@ -56,16 +56,18 @@ export function Input({
           {isRequired && <span className="text-red-500 ml-1">*</span>}
         </label>
       )}
-      <div className="relative flex items-center">
-        {startContent && <div className="absolute left-3 z-10">{startContent}</div>}
+      <div
+        className={`flex items-center bg-default-100 border rounded-xl ${borderColor} ${startContent || endContent ? "px-3" : ""}`}
+      >
+        {startContent && <div className="flex-shrink-0">{startContent}</div>}
         <input
           aria-label={label}
           aria-invalid={isInvalid}
-          className={`w-full px-3 py-2 bg-default-100 border rounded-xl text-sm text-foreground transition-colors focus:outline-none ${borderColor} ${startContent ? "pl-10" : ""} ${endContent ? "pr-10" : ""} ${classNames.input || ""}`}
+          className={`flex-1 py-2 bg-transparent text-sm text-foreground focus:outline-none ${startContent || endContent ? "" : "px-3"} ${classNames.input || ""}`}
           onChange={handleChange}
           {...rest}
         />
-        {endContent && <div className="absolute right-1 z-10">{endContent}</div>}
+        {endContent && <div className="flex-shrink-0">{endContent}</div>}
       </div>
       {(description || errorMessage) && (
         <div