fixed:Search box doesn't render well in small views and dashboard res…

…ponsiveness (#85) * fixed:Search box doesn't render well in small views * fixed:Search box doesn't render well in small views * fixed:dashboard mobile responsiveness * Update package.json * upadted * fixed:format errors
tscircuit · Oct 18, 2024 · 00b782e · 00b782e
1 parent a60c997
commit 00b782e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 25 deletions.
diff --git a/src/components/SearchComponent.tsx b/src/components/SearchComponent.tsx
@@ -73,7 +73,7 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
       {showResults && searchResults && (
         <div
           ref={resultsRef}
-          className="absolute top-full left-0 right-0 mt-2 bg-white shadow-lg rounded-md z-10"
+          className="absolute top-full left-0 right-0 mt-2 bg-white shadow-lg rounded-md z-10 md:w-52"
         >
           {searchResults.length > 0 ? (
             <ul className="divide-y divide-gray-200">
@@ -85,10 +85,10 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
                     rel="noopener noreferrer"
                     className="block"
                   >
-                    <div className="font-medium text-blue-600">
+                    <div className="font-medium text-blue-600 break-words">
                       {snippet.name}
                     </div>
-                    <div className="text-sm text-gray-500">
+                    <div className="text-sm text-gray-500 break-words">
                       {snippet.description}
                     </div>
                   </a>

diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
@@ -45,29 +45,33 @@ export const DashboardPage = () => {
       <Header />
       <div className="container mx-auto px-4 py-8">
         <h1 className="text-3xl font-bold mb-6">Dashboard</h1>
-        <div className="flex">
-          <div className="w-3/4 pr-8">
+        <div className="flex md:flex-row flex-col">
+          <div className="md:w-3/4 p-0 md:pr-6">
             <div className="mt-6 mb-4">
-              <div className="flex gap-2 items-center">
-                <h2 className="text-sm text-gray-600">Edit Recent</h2>
-                {mySnippets &&
-                  mySnippets.slice(0, 3).map((snippet) => (
-                    <div key={snippet.snippet_id}>
-                      <Link
-                        href={`/editor?snippet_id=${snippet.snippet_id}`}
-                        className="text-blue-600 hover:underline"
-                      >
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="font-medium"
+              <div className="flex items-center">
+                <h2 className="text-sm text-gray-600 whitespace-nowrap">
+                  Edit Recent
+                </h2>
+                <div className="flex gap-2 items-center overflow-x-scroll md:overflow-hidden ">
+                  {mySnippets &&
+                    mySnippets.slice(0, 3).map((snippet) => (
+                      <div key={snippet.snippet_id}>
+                        <Link
+                          href={`/editor?snippet_id=${snippet.snippet_id}`}
+                          className="text-blue-600 hover:underline"
                         >
-                          {snippet.unscoped_name}
-                          <Edit2 className="w-3 h-3 ml-2" />
-                        </Button>
-                      </Link>
-                    </div>
-                  ))}
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="font-medium"
+                          >
+                            {snippet.unscoped_name}
+                            <Edit2 className="w-3 h-3 ml-2" />
+                          </Button>
+                        </Link>
+                      </div>
+                    ))}
+                </div>
               </div>
             </div>
             <CreateNewSnippetHero />
@@ -98,7 +102,7 @@ export const DashboardPage = () => {
               </div>
             )}
           </div>
-          <div className="w-1/4">
+          <div className="md:w-1/4">
             <h2 className="text-sm font-bold mb-2 text-gray-700 border-b border-gray-200">
               Trending Snippets
             </h2>