From beacf3f01274483144491edc2c933509c532fe4a Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Tue, 20 Jan 2026 13:35:11 +0000
Subject: [PATCH] improved text field styling

---
 packages/frontend/src/components/issue-detail-pane.tsx | 10 +++++++---
 packages/frontend/src/components/ui/input.tsx          |  8 +++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/issue-detail-pane.tsx b/packages/frontend/src/components/issue-detail-pane.tsx
index 1cc0c5f..fbeddcd 100644
--- a/packages/frontend/src/components/issue-detail-pane.tsx
+++ b/packages/frontend/src/components/issue-detail-pane.tsx
@@ -15,7 +15,7 @@ import { Input } from "@/components/ui/input";
 import { SelectTrigger } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import { issue } from "@/lib/server";
-import { issueID } from "@/lib/utils";
+import { cn, issueID } from "@/lib/utils";
 import SmallSprintDisplay from "./small-sprint-display";
 import { SprintSelect } from "./sprint-select";
 import { IconButton } from "./ui/icon-button";
@@ -366,7 +366,11 @@ export function IssueDetailPane({
                                 }
                             }}
                             disabled={isSavingTitle}
-                            className="w-full border-transparent hover:border-input focus:border-input h-auto py-0.5"
+                            className={cn(
+                                "w-full border-0 border-b-1 border-b-input/50",
+                                "hover:border-b-input focus:border-b-input h-auto",
+                            )}
+                            inputClassName={cn("bg-background px-1.5 font-600")}
                         />
                     </div>
                 </div>
@@ -387,7 +391,7 @@ export function IssueDetailPane({
                         }}
                         placeholder="Add a description..."
                         disabled={isSavingDescription}
-                        className="text-sm border-transparent hover:border-input focus:border-input resize-none"
+                        className="text-sm border-input/50 hover:border-input focus:border-input resize-none !bg-background"
                     />
                 ) : (
                     <Button
diff --git a/packages/frontend/src/components/ui/input.tsx b/packages/frontend/src/components/ui/input.tsx
index 5f1a5ce..7841bc1 100644
--- a/packages/frontend/src/components/ui/input.tsx
+++ b/packages/frontend/src/components/ui/input.tsx
@@ -7,8 +7,13 @@ function Input({
     type,
     showCounter = true,
     showHashPrefix = false,
+    inputClassName,
     ...props
-}: React.ComponentProps<"input"> & { showCounter?: boolean; showHashPrefix?: boolean }) {
+}: React.ComponentProps<"input"> & {
+    showCounter?: boolean;
+    showHashPrefix?: boolean;
+    inputClassName?: string;
+}) {
     const maxLength = typeof props.maxLength === "number" ? props.maxLength : undefined;
     const currentLength = typeof props.value === "string" ? props.value.length : undefined;
 
@@ -37,6 +42,7 @@ function Input({
                     "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
                     "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
                     showHashPrefix ? "pl-2 py-0" : "pl-3",
+                    inputClassName,
                 )}
                 {...props}
             />