stuff

frontend/src/correspondents/CorrespondentsPanel.jsx

@@ -119,10 +119,10 @@ function CorrespondentsPanel({
 
   return (
     <section className="correspondents-panel">
-      <div className="column-header">
+      <div className="panel-section__header">
-        <div className="column-header__titles">
+        <div className="panel-section__titles">
           <h2>Correspondents</h2>
-          <div className="column-subtitle">{correspondents.length} total</div>
+          <div className="panel-section__subtitle">{correspondents.length} total</div>
         </div>
         <div className="header-actions correspondents-actions">
           <form className="correspondents-actions__form" onSubmit={handleCreate}>
@@ -147,7 +147,7 @@ function CorrespondentsPanel({
           </button>
         </div>
       </div>
-      <div className="column-body tags-panel__body">
+      <div className="panel-section__body tags-panel__body">
         {correspondents.length === 0 ? (
           <div className="empty-state">No correspondents created yet.</div>
         ) : (

frontend/src/documents/DocumentsTable.jsx

@@ -342,14 +342,14 @@ const DocumentsTable = ({
 
   return (
     <section
-      className={`documents-panel column documents-panel--view-${isGridView ? 'grid' : 'list'}`}
+      className={`documents-panel documents-panel--view-${isGridView ? 'grid' : 'list'}`}
     >
       {showHeader ? (
-        <div className="column-header">
+        <div className="panel-section__header">
-          <div className="column-header__titles">
+          <div className="panel-section__titles">
             <h2>{currentFolderName}</h2>
             {showingSearchResults && (
-              <div className="column-subtitle">Search results</div>
+              <div className="panel-section__subtitle">Search results</div>
             )}
           </div>
           <div className="header-actions">
@@ -399,7 +399,7 @@ const DocumentsTable = ({
           No documents match the current filters.
         </div>
       )}
-      <div className="column-body">
+      <div className="panel-section__body">
         <div
           ref={assignScrollRef}
           className="documents-scroll"

frontend/src/styles.css

@@ -848,7 +848,7 @@ button.danger:hover:not([disabled]) {
   font-size: 0.9rem;
 }
 
-.column-header {
+.panel-section__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -856,33 +856,33 @@ button.danger:hover:not([disabled]) {
   padding: 0 0 0.5rem;
 }
 
-.column-header__titles {
+.panel-section__titles {
   display: flex;
   flex-direction: column;
   gap: 0.3rem;
 }
 
-.column-header h2 {
+.panel-section__header h2 {
   margin: 0;
   font-size: 0.9rem;
   font-weight: 600;
 }
 
-.column-subtitle {
+.panel-section__subtitle {
   margin-top: 0.25rem;
   font-size: 0.78rem;
   color: var(--muted);
 }
 
-
+.panel-section__body {
-.column-body {
   flex: 1;
   display: flex;
   flex-direction: column;
   min-height: 0;
 }
 
-.column-body.scrollable {
+.panel-section__body--scrollable,
+.panel-section__body.scrollable {
   overflow-y: auto;
 }
 
@@ -1256,29 +1256,23 @@ button.danger:hover:not([disabled]) {
   outline-offset: 2px;
 }
 
-.documents-panel .column-header {
+.documents-panel .panel-section__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.documents-panel .column-header .header-actions {
+.documents-panel .panel-section__header .header-actions {
   display: flex;
   gap: 0.5rem;
 }
 
-
+.documents-panel .panel-section__body {
-.documents-panel .column-body {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
-.documents-panel .column-toolbar {
-  flex-shrink: 0;
-  padding-bottom: 0.4rem;
-}
-
 .documents-panel .documents-scroll {
   overflow-y: auto;
   background: transparent;
@@ -2341,9 +2335,6 @@ form.inline {
   opacity: 0.6;
   cursor: default;
 }
-.column-toolbar .filter-bar {
-  margin-bottom: 0;
-}
 .doc-list__name {
   width: 100%;
 }

frontend/src/tags/TagsPanel.jsx

@@ -148,10 +148,10 @@ function TagsPanel({
 
   return (
     <section className="tags-panel">
-      <div className="column-header">
+      <div className="panel-section__header">
-        <div className="column-header__titles">
+        <div className="panel-section__titles">
           <h2>Tags</h2>
-          <div className="column-subtitle">{tags.length} total</div>
+          <div className="panel-section__subtitle">{tags.length} total</div>
         </div>
         <div className="header-actions tags-actions">
           <form className="tags-actions__form" onSubmit={handleCreate}>
@@ -194,7 +194,7 @@ function TagsPanel({
           </button>
         </div>
       </div>
-      <div className="column-body tags-panel__body">
+      <div className="panel-section__body tags-panel__body">
         {tags.length === 0 ? (
           <div className="empty-state">No tags created yet.</div>
         ) : (