better looking import dialog, run button on view snippet page

src/components/PreviewContent.tsx

@@ -21,6 +21,7 @@ import { ErrorBoundary } from "react-error-boundary"
 import { ErrorTabContent } from "./ErrorTabContent"
 import { cn } from "@/lib/utils"
 import { useCallback } from "react"
+import { RunButton } from "./RunButton"
 
 export type PreviewContentProps =
   | {
@@ -96,14 +97,10 @@ export const PreviewContent = ({
     <div className={className}>
       <Tabs value={activeTab} onValueChange={setActiveTab}>
         <div className="flex items-center gap-2">
-          <Button
-            className="bg-blue-600 hover:bg-blue-500"
+          <RunButton
             onClick={() => triggerRunTsx()}
             disabled={versionOfCodeLastRun === code && tsxRunTriggerCount !== 0}
-          >
-            Run
-            <PlayIcon className="w-3 h-3 ml-2" />
-          </Button>
+          />
           <div className="flex-grow" />
           <TabsList>
             {showCodeTab && <TabsTrigger value="code">Code</TabsTrigger>}

src/components/RunButton.tsx

@@ -0,0 +1,21 @@
+import { PlayIcon } from "lucide-react"
+import { Button } from "./ui/button"
+
+export const RunButton = ({
+  onClick,
+  disabled,
+}: {
+  onClick: () => void
+  disabled: boolean
+}) => {
+  return (
+    <Button
+      className="bg-blue-600 hover:bg-blue-500"
+      onClick={onClick}
+      disabled={disabled}
+    >
+      Run
+      <PlayIcon className="w-3 h-3 ml-2" />
+    </Button>
+  )
+}

src/components/dialogs/import-snippet-dialog.tsx

@@ -47,22 +47,22 @@ export const ImportSnippetDialog = ({
             <ul className="w-full">
               {snippets?.map((snippet: Snippet) => (
                 <li
-                  className="flex flex-nowrap my-1 text-xs items-center w-64 overflow-x-hidden"
+                  className="flex items-center my-1 text-xs w-full"
                   key={snippet.snippet_id}
                 >
                   <a
                     href={`/${snippet.name}`}
                     target="_blank"
-                    className="whitespace-nowrap mr-2 text-blue-500 hover:underline cursor-pointer"
+                    className="whitespace-nowrap mr-2 text-blue-500 hover:underline cursor-pointer flex-shrink-0"
                   >
                     {snippet.name}
                   </a>
-                  <div className="text-xs text-gray-500 flex whitespace-nowrap overflow-ellipsis">
+                  <div className="text-xs text-gray-500 flex-grow overflow-hidden text-ellipsis whitespace-nowrap">
                     {snippet.description}
                   </div>
                   <Button
                     size="sm"
-                    className="ml-2"
+                    className="ml-2 flex-shrink-0"
                     variant="outline"
                     onClick={() => {
                       onSnippetSelected(snippet)

src/pages/view-snippet.tsx

@@ -1,6 +1,7 @@
 import { CodeEditor } from "@/components/CodeEditor"
 import { DownloadButtonAndMenu } from "@/components/DownloadButtonAndMenu"
 import Header from "@/components/Header"
+import { RunButton } from "@/components/RunButton"
 import { Button } from "@/components/ui/button"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import ViewSnippetHeader from "@/components/ViewSnippetHeader"
@@ -18,10 +19,12 @@ export const ViewSnippetPage = () => {
   const { author, snippetName } = useParams()
   const { snippet } = useCurrentSnippet()
 
-  const { circuitJson, message } = useRunTsx({
-    code: snippet?.code ?? "",
-    type: snippet?.snippet_type,
-  })
+  const { circuitJson, message, triggerRunTsx, tsxRunTriggerCount } = useRunTsx(
+    {
+      code: snippet?.code ?? "",
+      type: snippet?.snippet_type,
+    },
+  )
 
   return (
     <div>
@@ -51,6 +54,10 @@ export const ViewSnippetPage = () => {
                 className="hidden md:flex"
               />
               <div className="flex-grow" />
+              <RunButton
+                onClick={triggerRunTsx}
+                disabled={tsxRunTriggerCount !== 0}
+              />
               <TabsList>
                 <TabsTrigger value="code">Code</TabsTrigger>
                 <TabsTrigger value="pcb">PCB</TabsTrigger>