@actuate-media/cms-admin 0.49.1 → 0.49.4

package/src/views/PageEditor.tsx

@@ -122,7 +122,7 @@ export function PageEditor({ id, onNavigate }: PageEditorProps) {
               value={title}
               onChange={(e) => setTitle(e.target.value)}
               placeholder="Page title"
-              className="mb-4 w-full border-none px-0 text-2xl font-bold placeholder:text-gray-300 focus:ring-0 focus:outline-none sm:text-3xl"
+              className="mb-4 w-full border-none px-0 text-2xl font-medium placeholder:text-gray-300 focus:ring-0 focus:outline-none sm:text-3xl"
             />
 
             <div className="mb-4">
@@ -149,7 +149,7 @@ export function PageEditor({ id, onNavigate }: PageEditorProps) {
         <div className="w-[30%] overflow-y-auto border-l border-gray-200 bg-gray-50">
           <div className="space-y-4 p-4">
             <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <h3 className="mb-3 text-sm font-semibold text-gray-900">Publish</h3>
+              <h3 className="mb-3 text-sm font-medium text-gray-900">Publish</h3>
               <div className="space-y-3">
                 <div>
                   <label className="mb-1 block text-xs font-medium text-gray-700">Status</label>

package/src/views/Pages/PagesListView.tsx

@@ -347,7 +347,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
 
       {/* Tag filter bar */}
       <div className="flex flex-wrap items-center gap-2">
-        <span className="text-muted-foreground text-[10px] font-semibold tracking-wider uppercase">
+        <span className="text-muted-foreground text-[10px] font-medium tracking-wider uppercase">
           Tags
         </span>
         {tags.map((t) => (
@@ -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 && (
@@ -629,7 +637,7 @@ function GroupBlock({
       {showHeader && (
         <tr className="bg-muted/30 border-border border-b">
           <td colSpan={7} className="px-3 py-2">
-            <span className="text-foreground inline-flex items-center gap-2 text-xs font-semibold tracking-wider uppercase">
+            <span className="text-foreground inline-flex items-center gap-2 text-xs font-medium tracking-wider uppercase">
               {color && <span aria-hidden className={`h-2 w-2 rounded-full ${dotFor(color)}`} />}
               {label}
               <span className="text-muted-foreground tabular-nums">{count}</span>
@@ -811,7 +819,7 @@ function PageRow({
         <div className="flex items-center gap-2">
           <span
             aria-hidden
-            className="bg-muted text-muted-foreground inline-flex h-7 w-7 items-center justify-center rounded-full text-[11px] font-semibold"
+            className="bg-muted text-muted-foreground inline-flex h-7 w-7 items-center justify-center rounded-full text-[11px] font-medium"
           >
             {page.authorInitials}
           </span>

package/src/views/Pages.tsx

@@ -279,7 +279,7 @@ export function Pages({ onNavigate }: PagesProps) {
             <FolderInput className="h-5 w-5 text-gray-600" />
           </button>
           <div>
-            <h1 className="text-xl font-semibold text-gray-900 sm:text-2xl">Pages</h1>
+            <h1 className="text-xl font-medium text-gray-900 sm:text-2xl">Pages</h1>
             <p className="text-sm text-gray-500">
               {totalCount} page{totalCount !== 1 ? 's' : ''}
             </p>

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
@@ -707,7 +711,7 @@ function PostRow({
         <div className="flex items-center gap-2">
           <span
             aria-hidden
-            className="bg-muted text-muted-foreground inline-flex h-7 w-7 items-center justify-center rounded-full text-[11px] font-semibold"
+            className="bg-muted text-muted-foreground inline-flex h-7 w-7 items-center justify-center rounded-full text-[11px] font-medium"
           >
             {post.authorInitials}
           </span>