@actuate-media/cms-admin 0.49.0 → 0.49.3

package/src/views/Pages/PagesListView.tsx

@@ -398,123 +398,131 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
 
       {/* Table card */}
       <div className="bg-card border-border overflow-hidden rounded-xl border shadow-sm">
-        <table className="w-full table-fixed" role="table" aria-label="Pages">
-          <colgroup>
-            <col style={{ width: '40px' }} />
-            <col />
-            <col style={{ width: '200px' }} />
-            <col style={{ width: '170px' }} />
-            <col style={{ width: '120px' }} />
-            <col style={{ width: '130px' }} />
-            <col style={{ width: '80px' }} />
-          </colgroup>
-          <thead className="border-border bg-muted/40 border-b">
-            <tr className="text-muted-foreground text-xs">
-              <th scope="col" className="px-3 py-2.5 text-left">
-                <input
-                  type="checkbox"
-                  aria-label="Select all pages on this page"
-                  checked={allOnPageSelected}
-                  onChange={(e) => toggleAllOnPage(e.target.checked)}
-                  className="border-border accent-primary rounded"
-                />
-              </th>
-              <th scope="col" aria-sort={ariaSortFor('title')} className="px-3 py-2.5 text-left">
-                <SortHeader
-                  label="Title"
-                  field="title"
-                  current={sortBy}
-                  dir={dir}
-                  onSort={handleSort}
-                />
-              </th>
-              <th scope="col" className="px-3 py-2.5 text-left">
-                <span className="text-xs font-medium tracking-wider uppercase">Tags</span>
-              </th>
-              <th scope="col" aria-sort={ariaSortFor('author')} className="px-3 py-2.5 text-left">
-                <SortHeader
-                  label="Author"
-                  field="author"
-                  current={sortBy}
-                  dir={dir}
-                  onSort={handleSort}
-                />
-              </th>
-              <th scope="col" aria-sort={ariaSortFor('status')} className="px-3 py-2.5 text-left">
-                <SortHeader
-                  label="Status"
-                  field="status"
-                  current={sortBy}
-                  dir={dir}
-                  onSort={handleSort}
-                />
-              </th>
-              <th scope="col" aria-sort={ariaSortFor('modified')} className="px-3 py-2.5 text-left">
-                <SortHeader
-                  label="Last Modified"
-                  field="modified"
-                  current={sortBy}
-                  dir={dir}
-                  onSort={handleSort}
-                />
-              </th>
-              <th scope="col" aria-sort={ariaSortFor('seo')} className="px-3 py-2.5 text-left">
-                <SortHeader
-                  label="SEO"
-                  field="seo"
-                  current={sortBy}
-                  dir={dir}
-                  onSort={handleSort}
+        {/* Horizontal scroll on narrow viewports: the fixed columns keep their
+            width and the table scrolls sideways instead of crushing content. */}
+        <div className="overflow-x-auto">
+          <table className="w-full min-w-[800px] table-fixed" role="table" aria-label="Pages">
+            <colgroup>
+              <col style={{ width: '40px' }} />
+              <col />
+              <col style={{ width: '200px' }} />
+              <col style={{ width: '170px' }} />
+              <col style={{ width: '120px' }} />
+              <col style={{ width: '130px' }} />
+              <col style={{ width: '80px' }} />
+            </colgroup>
+            <thead className="border-border bg-muted/40 border-b">
+              <tr className="text-muted-foreground text-xs">
+                <th scope="col" className="px-3 py-2.5 text-left">
+                  <input
+                    type="checkbox"
+                    aria-label="Select all pages on this page"
+                    checked={allOnPageSelected}
+                    onChange={(e) => toggleAllOnPage(e.target.checked)}
+                    className="border-border accent-primary rounded"
+                  />
+                </th>
+                <th scope="col" aria-sort={ariaSortFor('title')} className="px-3 py-2.5 text-left">
+                  <SortHeader
+                    label="Title"
+                    field="title"
+                    current={sortBy}
+                    dir={dir}
+                    onSort={handleSort}
+                  />
+                </th>
+                <th scope="col" className="px-3 py-2.5 text-left">
+                  <span className="text-xs font-medium tracking-wider uppercase">Tags</span>
+                </th>
+                <th scope="col" aria-sort={ariaSortFor('author')} className="px-3 py-2.5 text-left">
+                  <SortHeader
+                    label="Author"
+                    field="author"
+                    current={sortBy}
+                    dir={dir}
+                    onSort={handleSort}
+                  />
+                </th>
+                <th scope="col" aria-sort={ariaSortFor('status')} className="px-3 py-2.5 text-left">
+                  <SortHeader
+                    label="Status"
+                    field="status"
+                    current={sortBy}
+                    dir={dir}
+                    onSort={handleSort}
+                  />
+                </th>
+                <th
+                  scope="col"
+                  aria-sort={ariaSortFor('modified')}
+                  className="px-3 py-2.5 text-left"
+                >
+                  <SortHeader
+                    label="Last Modified"
+                    field="modified"
+                    current={sortBy}
+                    dir={dir}
+                    onSort={handleSort}
+                  />
+                </th>
+                <th scope="col" aria-sort={ariaSortFor('seo')} className="px-3 py-2.5 text-left">
+                  <SortHeader
+                    label="SEO"
+                    field="seo"
+                    current={sortBy}
+                    dir={dir}
+                    onSort={handleSort}
+                  />
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {loading && pages.length === 0 && <LoadingRows />}
+              {!loading && error && (
+                <tr>
+                  <td colSpan={7} className="px-3 py-12 text-center">
+                    <div className="text-foreground mb-2 text-sm font-medium">{error}</div>
+                    <button
+                      onClick={() => setRefreshToken((t) => t + 1)}
+                      className="text-primary text-sm hover:underline"
+                    >
+                      Try again
+                    </button>
+                  </td>
+                </tr>
+              )}
+              {!loading && !error && pages.length === 0 && (
+                <EmptyRow
+                  filtersActive={filtersAreActive}
+                  onClear={clearFilters}
+                  onNewPage={() => onNavigate('/pages/new')}
                 />
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {loading && pages.length === 0 && <LoadingRows />}
-            {!loading && error && (
-              <tr>
-                <td colSpan={7} className="px-3 py-12 text-center">
-                  <div className="text-foreground mb-2 text-sm font-medium">{error}</div>
-                  <button
-                    onClick={() => setRefreshToken((t) => t + 1)}
-                    className="text-primary text-sm hover:underline"
+              )}
+              {!loading &&
+                !error &&
+                displayGroups.map((group) => (
+                  <GroupBlock
+                    key={group.key}
+                    showHeader={grouped}
+                    label={group.label}
+                    color={group.color}
+                    count={group.pages.length}
                   >
-                    Try again
-                  </button>
-                </td>
-              </tr>
-            )}
-            {!loading && !error && pages.length === 0 && (
-              <EmptyRow
-                filtersActive={filtersAreActive}
-                onClear={clearFilters}
-                onNewPage={() => onNavigate('/pages/new')}
-              />
-            )}
-            {!loading &&
-              !error &&
-              displayGroups.map((group) => (
-                <GroupBlock
-                  key={group.key}
-                  showHeader={grouped}
-                  label={group.label}
-                  color={group.color}
-                  count={group.pages.length}
-                >
-                  {group.pages.map((p) => (
-                    <PageRow
-                      key={p.id}
-                      page={p}
-                      selected={selected.has(p.id)}
-                      resolveTag={(slug) => tagBySlug.get(slug)}
-                      onSelect={() => toggleOne(p.id)}
-                      onOpen={() => onNavigate(`/pages/${p.id}/edit`)}
-                    />
-                  ))}
-                </GroupBlock>
-              ))}
-          </tbody>
-        </table>
+                    {group.pages.map((p) => (
+                      <PageRow
+                        key={p.id}
+                        page={p}
+                        selected={selected.has(p.id)}
+                        resolveTag={(slug) => tagBySlug.get(slug)}
+                        onSelect={() => toggleOne(p.id)}
+                        onOpen={() => onNavigate(`/pages/${p.id}/edit`)}
+                      />
+                    ))}
+                  </GroupBlock>
+                ))}
+            </tbody>
+          </table>
+        </div>
 
         {/* Pagination only for the flat (ungrouped) view. */}
         {!grouped && (

package/src/views/Posts/PostsListView.tsx

@@ -257,118 +257,122 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
 
       {/* Table card */}
       <div className="bg-card border-border overflow-hidden rounded-xl border shadow-sm">
-        <table className="w-full table-fixed" role="table" aria-label="Posts">
-          <colgroup>
-            <col style={{ width: '40px' }} />
-            <col />
-            <col style={{ width: '140px' }} />
-            <col style={{ width: '180px' }} />
-            <col style={{ width: '130px' }} />
-            <col style={{ width: '120px' }} />
-            <col style={{ width: '90px' }} />
-          </colgroup>
-          <thead className="border-border bg-muted/40 border-b">
-            <tr className="text-muted-foreground text-xs">
-              <th scope="col" className="px-3 py-2.5 text-left">
-                <input
-                  type="checkbox"
-                  aria-label="Select all posts on this page"
-                  checked={allOnPageSelected}
-                  onChange={(e) => toggleAllOnPage(e.target.checked)}
-                  className="border-border accent-primary rounded"
-                />
-              </th>
-              <th scope="col" className="px-3 py-2.5 text-left">
-                <SortHeader
-                  label="Title"
-                  field="title"
-                  current={sortBy}
-                  dir={dir}
-                  onSort={handleSort}
-                />
-              </th>
-              <th scope="col" className="px-3 py-2.5 text-left">
-                <SortHeader
-                  label="Type"
-                  field="type"
-                  current={sortBy}
-                  dir={dir}
-                  onSort={handleSort}
-                />
-              </th>
-              <th scope="col" className="px-3 py-2.5 text-left">
-                <SortHeader
-                  label="Author"
-                  field="author"
-                  current={sortBy}
-                  dir={dir}
-                  onSort={handleSort}
-                />
-              </th>
-              <th scope="col" className="px-3 py-2.5 text-left">
-                <SortHeader
-                  label="Status"
-                  field="status"
-                  current={sortBy}
-                  dir={dir}
-                  onSort={handleSort}
-                />
-              </th>
-              <th scope="col" className="px-3 py-2.5 text-left">
-                <SortHeader
-                  label="Date"
-                  field="date"
-                  current={sortBy}
-                  dir={dir}
-                  onSort={handleSort}
-                />
-              </th>
-              <th scope="col" className="px-3 py-2.5 text-left">
-                <SortHeader
-                  label="SEO"
-                  field="seo"
-                  current={sortBy}
-                  dir={dir}
-                  onSort={handleSort}
-                />
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {loading && posts.length === 0 && <LoadingRows />}
-            {!loading && error && (
-              <tr>
-                <td colSpan={7} className="px-3 py-12 text-center">
-                  <div className="text-foreground mb-2 text-sm font-medium">{error}</div>
-                  <button
-                    onClick={() => setRefreshToken((t) => t + 1)}
-                    className="text-primary text-sm hover:underline"
-                  >
-                    Try again
-                  </button>
-                </td>
+        {/* Horizontal scroll on narrow viewports: the fixed columns keep their
+            width and the table scrolls sideways instead of crushing content. */}
+        <div className="overflow-x-auto">
+          <table className="w-full min-w-[760px] table-fixed" role="table" aria-label="Posts">
+            <colgroup>
+              <col style={{ width: '40px' }} />
+              <col />
+              <col style={{ width: '140px' }} />
+              <col style={{ width: '180px' }} />
+              <col style={{ width: '130px' }} />
+              <col style={{ width: '120px' }} />
+              <col style={{ width: '90px' }} />
+            </colgroup>
+            <thead className="border-border bg-muted/40 border-b">
+              <tr className="text-muted-foreground text-xs">
+                <th scope="col" className="px-3 py-2.5 text-left">
+                  <input
+                    type="checkbox"
+                    aria-label="Select all posts on this page"
+                    checked={allOnPageSelected}
+                    onChange={(e) => toggleAllOnPage(e.target.checked)}
+                    className="border-border accent-primary rounded"
+                  />
+                </th>
+                <th scope="col" className="px-3 py-2.5 text-left">
+                  <SortHeader
+                    label="Title"
+                    field="title"
+                    current={sortBy}
+                    dir={dir}
+                    onSort={handleSort}
+                  />
+                </th>
+                <th scope="col" className="px-3 py-2.5 text-left">
+                  <SortHeader
+                    label="Type"
+                    field="type"
+                    current={sortBy}
+                    dir={dir}
+                    onSort={handleSort}
+                  />
+                </th>
+                <th scope="col" className="px-3 py-2.5 text-left">
+                  <SortHeader
+                    label="Author"
+                    field="author"
+                    current={sortBy}
+                    dir={dir}
+                    onSort={handleSort}
+                  />
+                </th>
+                <th scope="col" className="px-3 py-2.5 text-left">
+                  <SortHeader
+                    label="Status"
+                    field="status"
+                    current={sortBy}
+                    dir={dir}
+                    onSort={handleSort}
+                  />
+                </th>
+                <th scope="col" className="px-3 py-2.5 text-left">
+                  <SortHeader
+                    label="Date"
+                    field="date"
+                    current={sortBy}
+                    dir={dir}
+                    onSort={handleSort}
+                  />
+                </th>
+                <th scope="col" className="px-3 py-2.5 text-left">
+                  <SortHeader
+                    label="SEO"
+                    field="seo"
+                    current={sortBy}
+                    dir={dir}
+                    onSort={handleSort}
+                  />
+                </th>
               </tr>
-            )}
-            {!loading && !error && posts.length === 0 && (
-              <EmptyRow
-                filtersActive={filtersAreActive}
-                onClear={clearFilters}
-                onNewPost={() => onNavigate('/posts/new')}
-              />
-            )}
-            {!loading &&
-              !error &&
-              posts.map((p) => (
-                <PostRow
-                  key={p.id}
-                  post={p}
-                  selected={selected.has(p.id)}
-                  onSelect={() => toggleOne(p.id)}
-                  onOpen={() => onNavigate(`/posts/${p.postTypeId}/${p.id}/edit`)}
+            </thead>
+            <tbody>
+              {loading && posts.length === 0 && <LoadingRows />}
+              {!loading && error && (
+                <tr>
+                  <td colSpan={7} className="px-3 py-12 text-center">
+                    <div className="text-foreground mb-2 text-sm font-medium">{error}</div>
+                    <button
+                      onClick={() => setRefreshToken((t) => t + 1)}
+                      className="text-primary text-sm hover:underline"
+                    >
+                      Try again
+                    </button>
+                  </td>
+                </tr>
+              )}
+              {!loading && !error && posts.length === 0 && (
+                <EmptyRow
+                  filtersActive={filtersAreActive}
+                  onClear={clearFilters}
+                  onNewPost={() => onNavigate('/posts/new')}
                 />
-              ))}
-          </tbody>
-        </table>
+              )}
+              {!loading &&
+                !error &&
+                posts.map((p) => (
+                  <PostRow
+                    key={p.id}
+                    post={p}
+                    selected={selected.has(p.id)}
+                    onSelect={() => toggleOne(p.id)}
+                    onOpen={() => onNavigate(`/posts/${p.postTypeId}/${p.id}/edit`)}
+                  />
+                ))}
+            </tbody>
+          </table>
+        </div>
 
         {/* Pagination footer */}
         <PaginationFooter