feat: improve UI and prevent it from breaking

.env.example

@@ -7,3 +7,7 @@ VITE_CLERK_PUBLISHABLE_KEY=
 CONVEX_DEPLOYMENT=
 # Convex deployment URL (required)
 VITE_CONVEX_URL=
+
+# Set via `npx convex env set` for each deployment (dev and prod).
+# Value is the Clerk Frontend API URL from Clerk Dashboard → API Keys.
+# CLERK_FRONTEND_API_URL=

convex/auth.config.ts

@@ -1,7 +1,7 @@
 export default {
   providers: [
     {
-      domain: "https://modest-colt-58.clerk.accounts.dev",
+      domain: process.env.CLERK_FRONTEND_API_URL,
       applicationID: "convex",
     },
   ],

src/components/BookEntryCard.tsx

@@ -51,55 +51,53 @@ export function BookEntryCard({ entryId, title, author, status, shelfId, shelves
         />
       </div>
       <div className="flex flex-1 flex-col gap-2">
-        <div className="flex items-center justify-between gap-4">
-          <div className="min-w-0 flex-1">
-            <p className="truncate font-medium">{title}</p>
-            <p className="truncate text-sm text-muted-foreground">{author}</p>
-          </div>
-          <div className="flex shrink-0 items-center gap-2">
-            <Select
-              value={shelfId ?? 'none'}
-              onValueChange={(val) =>
-                assignToShelf({
-                  entryId,
-                  shelfId: val === 'none' ? undefined : (val as Id<'shelves'>),
-                })
-              }
-            >
-              <SelectTrigger className="w-36">
-                <SelectValue placeholder="No shelf" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="none">No shelf</SelectItem>
-                {shelves.map((s) => (
-                  <SelectItem key={s._id} value={s._id}>
-                    {s.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <Select
-              value={status}
-              onValueChange={(val) => updateStatus({ entryId, status: val as Status })}
-            >
-              <SelectTrigger className="w-44">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="want_to_read">Want to read</SelectItem>
-                <SelectItem value="currently_reading">Currently reading</SelectItem>
-                <SelectItem value="read">Read</SelectItem>
-              </SelectContent>
-            </Select>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => removeBook({ entryId })}
-              aria-label="Remove book"
-            >
-              ✕
-            </Button>
-          </div>
+        <div className="flex flex-col gap-1">
+          <p className="font-medium leading-snug">{title}</p>
+          <p className="text-sm text-muted-foreground">{author}</p>
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <Select
+            value={shelfId ?? 'none'}
+            onValueChange={(val) =>
+              assignToShelf({
+                entryId,
+                shelfId: val === 'none' ? undefined : (val as Id<'shelves'>),
+              })
+            }
+          >
+            <SelectTrigger className="w-36">
+              <SelectValue placeholder="No shelf" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="none">No shelf</SelectItem>
+              {shelves.map((s) => (
+                <SelectItem key={s._id} value={s._id}>
+                  {s.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Select
+            value={status}
+            onValueChange={(val) => updateStatus({ entryId, status: val as Status })}
+          >
+            <SelectTrigger className="w-44">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="want_to_read">Want to read</SelectItem>
+              <SelectItem value="currently_reading">Currently reading</SelectItem>
+              <SelectItem value="read">Read</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => removeBook({ entryId })}
+            aria-label="Remove book"
+          >
+            ✕
+          </Button>
         </div>
         <div className="flex items-start gap-3">
           <RatingWidget entryId={entryId} rating={rating} />

src/routes/index.tsx

@@ -45,7 +45,7 @@ function Dashboard() {
 
   return (
     <div className="min-h-screen p-8">
-      <div className="mx-auto max-w-2xl">
+      <div className="mx-auto w-full max-w-5xl">
         <div className="flex items-center justify-between">
           <h1 className="text-3xl font-bold">Bookshelf</h1>
           <UserButton />