Widening topics table

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>

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;
+  }
+}

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>