mobile responsive

app/(dashboard)/vani/page.tsx

@@ -145,19 +145,19 @@ export default function VaniPage() {
 
       <Can perm="vani:write">
         <section className="space-y-3 rounded-xl border border-border p-4">
-          <div className="flex flex-wrap items-center gap-2">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
             <input
               value={link}
               onChange={(e) => setLink(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && void pinByLink()}
               placeholder="Paste a link — /transcriptions/720720sb-london"
-              className={`${field} min-w-0 flex-1`}
+              className={`${field} w-full min-w-0 sm:flex-1`}
             />
             <button
               type="button"
               disabled={busy || !link.trim()}
               onClick={pinByLink}
-              className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+              className="shrink-0 whitespace-nowrap rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
             >
               Use this link
             </button>
@@ -167,22 +167,22 @@ export default function VaniPage() {
             link when you know exactly which item you want.
           </p>
 
-          <div className="flex flex-wrap items-center gap-3 border-t border-border pt-3">
-            <label className="text-sm text-muted-foreground">
+          <div className="flex flex-col gap-3 border-t border-border pt-3 sm:flex-row sm:items-center">
+            <label className="flex items-center text-sm text-muted-foreground">
               Date
               <input
                 type="date"
                 value={day}
                 min={todayUTC()}
                 onChange={(e) => setDay(e.target.value)}
-                className={`${field} ml-2`}
+                className={`${field} ml-2 min-w-0 flex-1 sm:flex-none`}
               />
             </label>
             <input
               value={query}
               onChange={(e) => setQuery(e.target.value)}
               placeholder="Search verses, chapters and lectures"
-              className={`${field} min-w-0 flex-1`}
+              className={`${field} w-full min-w-0 sm:flex-1`}
             />
           </div>