Improve: UI/UX details in template builds (#201)

<!-- CURSOR_SUMMARY -->
> [!NOTE]
> Polishes the builds table UI by updating the loading indicator,
adjusting alignment, and improving responsive overflow and column
sizing.
> 
> - **UI/UX tweaks for builds table**
> - `LoadMoreButton`: switches to "Loading" with `Loader
variant="dots"`, uses `inline-flex` with tighter spacing.
> - `Reason`: removes `prose-table` from `className` to simplify
styling.
>   - **Responsive/layout adjustments**:
>     - Scroll container `overflow-x-hidden` moves from `md` to `lg`.
> - Last `col` gains `max-lg:min-w-[500px]` to ensure readable width on
smaller screens.
> - "Back to top" and "Load more" rows are `text-center` on large
screens and `max-lg:text-start` on smaller screens.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
f8d5fa6. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: ben-fornefeld

src/features/dashboard/templates/builds/table-cells.tsx

@@ -98,9 +98,9 @@ export function LoadMoreButton({
 }) {
   if (isLoading) {
     return (
-      <span className="flex items-center gap-2">
-        <Loader variant="slash" size="sm" />
-        Loading...
+      <span className="inline-flex items-center gap-1">
+        Loading
+        <Loader variant="dots" />
       </span>
     )
   }
@@ -234,7 +234,7 @@ export function Reason({
   return (
     <CopyableCell
       value={statusMessage}
-      className="prose-table truncate max-w-0 min-w-full text-left"
+      className="truncate max-w-0 min-w-full text-left"
     >
       {statusMessage}
     </CopyableCell>

src/features/dashboard/templates/builds/table.tsx

@@ -158,7 +158,7 @@ const BuildsTable = () => {
     <div className="flex h-full min-h-0 flex-col overflow-hidden relative">
       <div
         ref={scrollContainerRef}
-        className="min-h-0 flex-1 overflow-y-auto overflow-x-auto md:overflow-x-hidden"
+        className="min-h-0 flex-1 overflow-y-auto overflow-x-auto lg:overflow-x-hidden"
       >
         <Table suppressHydrationWarning>
           <colgroup>
@@ -167,7 +167,7 @@ const BuildsTable = () => {
             <col style={colStyle(COLUMN_WIDTHS.template)} />
             <col style={colStyle(COLUMN_WIDTHS.started)} />
             <col style={colStyle(COLUMN_WIDTHS.duration)} />
-            <col />
+            <col className="max-lg:min-w-[500px]" />
           </colgroup>
 
           <TableHeader className="sticky top-0 z-10 bg-bg">
@@ -215,7 +215,7 @@ const BuildsTable = () => {
                   <TableRow>
                     <TableCell
                       colSpan={6}
-                      className="text-start text-fg-tertiary"
+                      className="text-center max-lg:text-start text-fg-tertiary"
                     >
                       <BackToTopButton onBackToTop={handleBackToTop} />
                     </TableCell>
@@ -272,7 +272,7 @@ const BuildsTable = () => {
                   <TableRow>
                     <TableCell
                       colSpan={6}
-                      className="text-start text-fg-tertiary"
+                      className="text-center max-lg:text-start text-fg-tertiary"
                     >
                       <LoadMoreButton
                         isLoading={isFetchingNextPage}