Merge pull request #162 from community-scripts/fix/ui

UI Fixes: Modal Layout and Filter Message Positioning

src/app/_components/FilterBar.tsx

@@ -93,17 +93,6 @@ export function FilterBar({
         </div>
       )}
 
-      {/* Filter Persistence Status */}
-      {!isLoadingFilters && saveFiltersEnabled && (
-        <div className="mb-4 flex items-center justify-center py-1">
-          <div className="flex items-center space-x-2 text-xs text-green-600">
-            <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
-              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-            </svg>
-            <span>Filters are being saved automatically</span>
-          </div>
-        </div>
-      )}
 
       {/* Filter Header */}
       {!isLoadingFilters && (
@@ -391,6 +380,7 @@ export function FilterBar({
 
       {/* Filter Summary and Clear All */}
       <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2">
+        <div className="flex items-center gap-4">
           <div className="text-sm text-muted-foreground">
             {filteredCount === totalScripts ? (
               <span>Showing all {totalScripts} scripts</span>
@@ -406,6 +396,17 @@ export function FilterBar({
             )}
           </div>
           
+          {/* Filter Persistence Status */}
+          {!isLoadingFilters && saveFiltersEnabled && (
+            <div className="flex items-center space-x-1 text-xs text-green-600">
+              <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+              </svg>
+              <span>Filters are being saved automatically</span>
+            </div>
+          )}
+        </div>
+
         {hasActiveFilters && (
           <Button
             onClick={clearAllFilters}

src/app/_components/ScriptDetailModal.tsx

@@ -359,16 +359,11 @@ export function ScriptDetailModal({
             })()}
         </div>
 
-        {/* Load Message */}
+        {/* Content */}
-        {loadMessage && (
+        <div className="space-y-4 sm:space-y-6 p-4 sm:p-6">
-          <div className="mx-4 sm:mx-6 mb-4 rounded-lg bg-primary/10 p-3 text-sm text-primary">
-            {loadMessage}
-          </div>
-        )}
-
           {/* Script Files Status */}
           {(scriptFilesLoading || comparisonLoading) && (
-          <div className="mx-4 sm:mx-6 mb-4 rounded-lg bg-primary/10 p-3 text-sm text-primary">
+            <div className="mb-4 rounded-lg bg-primary/10 p-3 text-sm text-primary">
               <div className="flex items-center space-x-2">
                 <div className="h-4 w-4 animate-spin rounded-full border-b-2 border-blue-600"></div>
                 <span>Loading script status...</span>
@@ -393,7 +388,7 @@ export function ScriptDetailModal({
               }
 
               return (
-              <div className="mx-4 sm:mx-6 mb-4 rounded-lg bg-muted p-3 text-sm text-muted-foreground">
+                <div className="mb-4 rounded-lg bg-muted p-3 text-sm text-muted-foreground">
                   <div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
                     <div className="flex items-center space-x-2">
                       <div
@@ -442,8 +437,13 @@ export function ScriptDetailModal({
               );
             })()}
 
-        {/* Content */}
+          {/* Load Message */}
-        <div className="space-y-4 sm:space-y-6 p-4 sm:p-6">
+          {loadMessage && (
+            <div className="mb-4 rounded-lg bg-primary/10 p-3 text-sm text-primary">
+              {loadMessage}
+            </div>
+          )}
+
           {/* Description */}
           <div>
             <h3 className="mb-2 text-base sm:text-lg font-semibold text-foreground">