💄 [annict] 検索欄サイズを可変に

Author: ci7lus

src/miraktest-annict/components/AnnictTrack.tsx

@@ -178,19 +178,24 @@ export const AnnictTrack: React.FC<{
           "bg-gray-800",
           "flex",
           "justify-between",
-          "items-center"
+          "items-center",
+          "space-x-4"
         )}
       >
         <h1 className="text-lg">視聴記録</h1>
-        <div className={clsx("flex", "items-center", "space-x-2")}>
+        <div
+          className={clsx("flex", "items-center", "space-x-4", "grow")}
+          style={{ maxWidth: "50vw" }}
+        >
           <button
             className={clsx(
               "rounded-md",
               "bg-gray-900",
               "hover:bg-gray-800",
               "p-1",
               "cursor-pointer",
-              "transition-colors"
+              "transition-colors",
+              "shrink-0"
             )}
             title="番組情報から取得"
             onClick={() => setLinkedAt(performance.now())}

src/miraktest-annict/components/SeachWorkForm.tsx

@@ -62,9 +62,9 @@ export const SearchWorkForm: React.FC<{
   }, [ref])
 
   return (
-    <div className="relative" ref={ref}>
+    <div className={clsx("relative", "grow")} ref={ref}>
       <form
-        className={clsx("flex", "items-center", "justify-center", "space-x-2")}
+        className={clsx("flex", "items-center", "justify-center", "space-x-8")}
         onSubmit={(e) => {
           e.preventDefault()
           setSearchTerm(localTerm || null)
@@ -79,7 +79,9 @@ export const SearchWorkForm: React.FC<{
             "rounded-md",
             "w-full",
             "text-gray-900",
-            "pr-8"
+            "pr-8",
+            "grow",
+            "max-w-6xl"
           )}
           value={localTerm}
           onChange={(e) => setLocalTerm(e.target.value)}

src/miraktest-annict/constants.ts

@@ -36,7 +36,7 @@ export const ANNICT_META = {
   id: ANNICT_PLUGIN_ID,
   name: "Annict",
   author: "ci7lus",
-  version: "0.3.4",
+  version: "0.3.5",
   description: "視聴中の番組をAnnictで記録する",
   authorUrl: "https://github.com/ci7lus",
   url: "https://github.com/ci7lus/miraktest-plugins/tree/master/src/miraktest-annict",