From 4c6d20fefc693946bd61d3c89405ffdb6faca574 Mon Sep 17 00:00:00 2001
From: Chris Troutner <chris.troutner@gmail.com>
Date: Fri, 18 Sep 2026 08:27:18 -0700
Subject: [PATCH] Widening topics table

---
 .../src/components/app-body/topics/index.js          |  3 ++-
 .../src/components/app-body/topics/topics.css        | 12 ++++++++++++
 psf-memo-client/src/components/nav-menu/index.js     |  4 ++--
 3 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 psf-memo-client/src/components/app-body/topics/topics.css

diff --git a/psf-memo-client/src/components/app-body/topics/index.js b/psf-memo-client/src/components/app-body/topics/index.js
index 84e49a7..c188715 100644
--- a/psf-memo-client/src/components/app-body/topics/index.js
+++ b/psf-memo-client/src/components/app-body/topics/index.js
@@ -12,6 +12,7 @@ import MemoDb from '../../../services/memo-db'
 import TopicDiscoveryPage from '../../../services/topic-discovery-page'
 import { buildTopicsTable } from '../../../services/topics-table'
 import '../../../App.css'
+import './topics.css'
 
 const PAGE_SIZE = 50
 
@@ -65,7 +66,7 @@ function Topics (props) {
   return (
     <Container className='topics-page'>
       <Row className='justify-content-center'>
-        <Col lg={8} md={10} xs={12}>
+        <Col lg={10} md={10} xs={12}>
           <header className='topics-heading'>
             <h1>Topics</h1>
             <p>Discover Memo conversations organized by topic.</p>
diff --git a/psf-memo-client/src/components/app-body/topics/topics.css b/psf-memo-client/src/components/app-body/topics/topics.css
new file mode 100644
index 0000000..f355cac
--- /dev/null
+++ b/psf-memo-client/src/components/app-body/topics/topics.css
@@ -0,0 +1,12 @@
+/*
+  Keep topic metadata on one line once the table has enough width.
+  The 1% + nowrap trick shrink-wraps those columns so the topic name
+  can use the remaining space.
+*/
+@media (min-width: 992px) {
+  .topics-page .topics-table th:nth-child(n+2),
+  .topics-page .topics-table td:nth-child(n+2) {
+    width: 1%;
+    white-space: nowrap;
+  }
+}
diff --git a/psf-memo-client/src/components/nav-menu/index.js b/psf-memo-client/src/components/nav-menu/index.js
index 79c14c2..58f0c0a 100644
--- a/psf-memo-client/src/components/nav-menu/index.js
+++ b/psf-memo-client/src/components/nav-menu/index.js
@@ -8,7 +8,7 @@
 // Global npm libraries
 import React, { useState } from 'react'
 import { Nav, Navbar, Image } from 'react-bootstrap' // Used for Navbar Style and Layouts .
-import { NavLink } from 'react-router-dom' // Used to navigate between routes
+import { NavLink, Link } from 'react-router-dom' // Used to navigate between routes
 
 // Assets
 import Logo from './psf-logo.png'
@@ -29,7 +29,7 @@ function NavMenu (props) {
   return (
     <>
       <Navbar expanded={expanded} onToggle={setExpanded} expand='xxxl' bg='dark' variant='dark' style={{ paddingRight: '20px' }}>
-        <Navbar.Brand href='#home' style={{ paddingLeft: '20px' }}>
+        <Navbar.Brand as={Link} to='/posts/recent' style={{ paddingLeft: '20px' }} onClick={handleClickEvent}>
           <Image src={Logo} thumbnail width='50' />{' '}
           Memo BCH
         </Navbar.Brand>