fix styling

src/components/board-buttons/board-buttons.tsx

@@ -123,7 +123,7 @@ const VoteButton = () => {
   );
 };
 
-const RefreshButton = () => {
+export const RefreshButton = () => {
   const { t } = useTranslation();
   const reset = useFeedResetStore((state) => state.reset);
   return (

src/components/board-buttons/index.ts

@@ -1 +1 @@
-export { MobileBoardButtons, DesktopBoardButtons, PostPageStats, ReturnButton, CatalogButton, UpdateButton, AutoButton, TopButton } from './board-buttons';
+export { MobileBoardButtons, DesktopBoardButtons, PostPageStats, ReturnButton, CatalogButton, UpdateButton, AutoButton, TopButton, RefreshButton } from './board-buttons';

src/components/error-display/error-display.module.css

@@ -3,7 +3,15 @@
 }
 
 .clickableErrorMessage {
+  all: unset;
+  font: inherit;
+  color: red;
   cursor: pointer;
+  display: inline;
+}
+
+.clickableErrorMessage:hover {
+  text-decoration: underline;
 }
 
 .feedbackSuccessMessage {

src/components/footer/footer.module.css

@@ -10,21 +10,43 @@
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 8px;
-  padding: 8px 0;
   text-align: center;
 }
 
+.styleRow {
+  padding: 8px 0 0;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.styleRowContent {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
 .boardsBarRow {
   padding: 8px 0;
 }
 
 .legalMeta {
   padding: 12px 0 0;
-  font-size: 11px;
+  font-size: 10px;
   color: var(--body-font-color);
   text-align: center;
 }
 
+.legalMeta a {
+  color: var(--boardsbar-desktop-link-text-color);
+  text-decoration: var(--boardsbar-desktop-link-text-decoration);
+}
+
+.legalMeta a:hover {
+  color: var(--boardsbar-desktop-link-text-color-hover);
+  text-decoration: var(--boardsbar-desktop-link-text-decoration-hover);
+  cursor: pointer;
+}
+
 /* Shared footer first-row layout (catalog, board pagination footer mode) */
 .footerRow {
   display: flex;
@@ -55,10 +77,9 @@
 
 /* Thread footer first row */
 .threadRow {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
   gap: 12px;
   width: 100%;
   text-transform: capitalize;
@@ -69,22 +90,56 @@
   align-items: center;
   gap: 4px;
   flex-wrap: wrap;
+  justify-self: start;
 }
 
 .threadCenter {
   display: flex;
   align-items: center;
   justify-content: center;
+  justify-self: center;
 }
 
 .threadRight {
   display: flex;
   align-items: center;
+  gap: 12px;
+  justify-self: end;
 }
 
+/* Buttons and links in footer first row (catalog, thread): same text-link styling */
+.threadRow button,
 .threadRow .button,
+.threadLeft a,
+.footerRow button,
+.footerRow .button,
+.footerLeft a,
 .button {
+  all: unset;
+  font: inherit;
   text-transform: capitalize;
+  color: var(--button-desktop-text-color);
+  text-decoration: var(--button-text-decoration);
+  cursor: pointer;
+}
+
+.threadRow button:hover:not(:disabled),
+.threadRow .button:hover:not(:disabled),
+.threadLeft a:hover,
+.footerRow button:hover:not(:disabled),
+.footerRow .button:hover:not(:disabled),
+.footerLeft a:hover,
+.button:hover:not(:disabled) {
+  color: var(--button-desktop-text-color-hover);
+}
+
+.threadRow button:disabled,
+.threadRow .button:disabled,
+.footerRow button:disabled,
+.footerRow .button:disabled,
+.button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 @media (max-width: 640px) {

src/components/footer/footer.tsx

@@ -3,7 +3,7 @@ import { useLocation, useParams } from 'react-router-dom';
 import BoardsBar from '../boardsbar';
 import SiteLegalMeta from '../site-legal-meta';
 import StyleSelector from '../style-selector/style-selector';
-import { ReturnButton, CatalogButton, TopButton, UpdateButton, AutoButton, PostPageStats } from '../board-buttons/board-buttons';
+import { ReturnButton, CatalogButton, TopButton, UpdateButton, AutoButton, PostPageStats, RefreshButton } from '../board-buttons/board-buttons';
 import { isAllView, isSubscriptionsView, isModView } from '../../lib/utils/view-utils';
 import useReplyModalStore from '../../stores/use-reply-modal-store';
 import styles from './footer.module.css';
@@ -16,12 +16,16 @@ import styles from './footer.module.css';
 export interface PageFooterDesktopProps {
   /** Mode-specific first row content (e.g. board pagination or thread controls) */
   firstRow: React.ReactNode;
+  /** Optional row between first row and BoardsBar (e.g. style selector on thread page) */
+  styleRow?: React.ReactNode;
 }
 
-export const PageFooterDesktop = ({ firstRow }: PageFooterDesktopProps) => (
+export const PageFooterDesktop = ({ firstRow, styleRow }: PageFooterDesktopProps) => (
   <footer className={styles.footer}>
     <hr />
     <div className={styles.firstRow}>{firstRow}</div>
+    <hr />
+    {styleRow != null ? <div className={styles.styleRow}>{styleRow}</div> : null}
     <div className={styles.boardsBarRow}>
       <BoardsBar />
     </div>
@@ -33,14 +37,34 @@ export const PageFooterDesktop = ({ firstRow }: PageFooterDesktopProps) => (
 
 /* -----------------------------------------------------------------------------
  * CatalogFooterFirstRow
- * Catalog footer first row: Style selector on right only (no pagination).
+ * Catalog footer first row: Return, Archive, Top, Refresh on left; Style selector on right.
  * -------------------------------------------------------------------------- */
 
-export const CatalogFooterFirstRow = () => {
+export interface CatalogFooterFirstRowProps {
+  subplebbitAddress?: string;
+  isInAllView?: boolean;
+  isInSubscriptionsView?: boolean;
+  isInModView?: boolean;
+}
+
+export const CatalogFooterFirstRow = ({ subplebbitAddress, isInAllView = false, isInSubscriptionsView = false, isInModView = false }: CatalogFooterFirstRowProps) => {
   const { t } = useTranslation();
   return (
     <div className={styles.footerRow}>
-      <div className={styles.footerLeft} />
+      <div className={styles.footerLeft}>
+        <span>
+          [<ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />]
+        </span>
+        <span>
+          [<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />]
+        </span>
+        <span>
+          [<TopButton />]
+        </span>
+        <span>
+          [<RefreshButton />]
+        </span>
+      </div>
       <div className={styles.footerRight}>
         <span className={styles.styleLabel}>{t('style')}:</span>
         <StyleSelector />
@@ -49,6 +73,21 @@ export const CatalogFooterFirstRow = () => {
   );
 };
 
+/* -----------------------------------------------------------------------------
+ * ThreadFooterStyleRow
+ * Style selector on its own row (thread page only, below first row, above BoardsBar).
+ * -------------------------------------------------------------------------- */
+
+export const ThreadFooterStyleRow = () => {
+  const { t } = useTranslation();
+  return (
+    <span className={styles.styleRowContent}>
+      <span className={styles.styleLabel}>{t('style')}:</span>
+      <StyleSelector />
+    </span>
+  );
+};
+
 /* -----------------------------------------------------------------------------
  * ThreadFooterFirstRow
  * Thread page footer first row: Return, Catalog, Top, Update, Auto, Post a Reply, stats.
@@ -80,16 +119,30 @@ export const ThreadFooterFirstRow = ({ postCid, threadNumber, subplebbitAddress,
   return (
     <div className={styles.threadRow}>
       <div className={styles.threadLeft}>
-        [<ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />] [
+        <span>
-        <CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />] [
+          [<ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />]
-        <TopButton />] [<UpdateButton />] [<AutoButton />]
+        </span>
+        <span>
+          [<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />]
+        </span>
+        <span>
+          [<TopButton />]
+        </span>
+        <span>
+          [<UpdateButton />]
+        </span>
+        <span>
+          [<AutoButton />]
+        </span>
       </div>
       <div className={styles.threadCenter}>
-        [
+        <span>
-        <button type='button' className={styles.button} onClick={handlePostReplyClick} disabled={isThreadClosed} aria-label={t('post_a_reply')}>
+          [
-          {t('post_a_reply')}
+          <button type='button' className={styles.button} onClick={handlePostReplyClick} disabled={isThreadClosed} aria-label={t('post_a_reply')}>
-        </button>
+            {t('post_a_reply')}
-        ]
+          </button>
+          ]
+        </span>
       </div>
       <div className={styles.threadRight}>
         <PostPageStats />

src/components/footer/index.ts

@@ -1,2 +1,2 @@
-export { PageFooterDesktop, CatalogFooterFirstRow, ThreadFooterFirstRow } from './footer';
+export { PageFooterDesktop, CatalogFooterFirstRow, ThreadFooterFirstRow, ThreadFooterStyleRow } from './footer';
-export type { PageFooterDesktopProps, ThreadFooterFirstRowProps } from './footer';
+export type { PageFooterDesktopProps, CatalogFooterFirstRowProps, ThreadFooterFirstRowProps } from './footer';

src/components/site-legal-meta/site-legal-meta.tsx

@@ -28,12 +28,9 @@ const SiteLegalMeta = ({ order = 'version-first' }: SiteLegalMetaProps) => {
 
   return (
     <>
-      <br />
       {first}
       <br />
-      <br />
+      <span style={{ display: 'block', marginTop: 5 }}>{second}</span>
-      <br />
-      {second}
     </>
   );
 };

src/views/catalog/catalog.tsx

@@ -386,11 +386,20 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
             isInModView={isInModView}
             showLoadingEllipsis={effectiveInfiniteScroll}
           />
-          <PageFooterDesktop firstRow={<CatalogFooterFirstRow />} />
+          <PageFooterDesktop
+            firstRow={
+              <CatalogFooterFirstRow
+                subplebbitAddress={subplebbitAddress}
+                isInAllView={isInAllView}
+                isInSubscriptionsView={isInSubscriptionsView}
+                isInModView={isInModView}
+              />
+            }
+          />
         </>
       ),
     }),
-    [subplebbitAddresses, hasMore, cappedFeed.length, isInAllView, isInSubscriptionsView, isInModView, effectiveInfiniteScroll],
+    [subplebbitAddresses, hasMore, cappedFeed.length, subplebbitAddress, isInAllView, isInSubscriptionsView, isInModView, effectiveInfiniteScroll],
   );
 
   const isFeedLoaded = feed.length > 0 || state === 'failed';
@@ -541,7 +550,16 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
                 error={error}
               />
             </div>
-            <PageFooterDesktop firstRow={<CatalogFooterFirstRow />} />
+            <PageFooterDesktop
+              firstRow={
+                <CatalogFooterFirstRow
+                  subplebbitAddress={subplebbitAddress}
+                  isInAllView={isInAllView}
+                  isInSubscriptionsView={isInSubscriptionsView}
+                  isInModView={isInModView}
+                />
+              }
+            />
           </>
         )}
       </div>

src/views/post/post.tsx

@@ -10,7 +10,7 @@ import { useDirectories } from '../../hooks/use-directories';
 import { isDirectoryBoard } from '../../lib/utils/route-utils';
 import useIsMobile from '../../hooks/use-is-mobile';
 import ErrorDisplay from '../../components/error-display/error-display';
-import { PageFooterDesktop, ThreadFooterFirstRow } from '../../components/footer';
+import { PageFooterDesktop, ThreadFooterFirstRow, ThreadFooterStyleRow } from '../../components/footer';
 import PostDesktop from '../../components/post-desktop';
 import PostMobile from '../../components/post-mobile';
 import styles from './post.module.css';
@@ -205,6 +205,7 @@ const PostPage = () => {
       {post?.cid && subplebbitAddress ? (
         <PageFooterDesktop
           firstRow={<ThreadFooterFirstRow postCid={post.cid} threadNumber={post?.number} subplebbitAddress={subplebbitAddress} isThreadClosed={!!post?.locked} />}
+          styleRow={<ThreadFooterStyleRow />}
         />
       ) : null}
     </div>