refactor: always show settings

apps/client/src/views/cuesheet/Cuesheet.tsx

@@ -40,7 +40,7 @@ export default function Cuesheet({
   selectedId,
   currentBlockId,
 }: CuesheetProps) {
-  const { followSelected, showSettings, showDelayBlock, showPrevious, showIndexColumn } = useCuesheetSettings();
+  const { followSelected, showDelayBlock, showPrevious, showIndexColumn } = useCuesheetSettings();
   const {
     columnVisibility,
     columnOrder,
@@ -110,14 +110,12 @@ export default function Cuesheet({
 
   return (
     <>
-      {showSettings && (
+      <CuesheetTableSettings
-        <CuesheetTableSettings
+        columns={allLeafColumns}
-          columns={allLeafColumns}
+        handleResetResizing={resetColumnResizing}
-          handleResetResizing={resetColumnResizing}
+        handleResetReordering={resetColumnOrder}
-          handleResetReordering={resetColumnOrder}
+        handleClearToggles={setAllVisible}
-          handleClearToggles={setAllVisible}
+      />
-        />
-      )}
       <div ref={tableContainerRef} className={style.cuesheetContainer}>
         <table className={style.cuesheet}>
           <CuesheetHeader headerGroups={headerGroups} saveColumnOrder={reorder} showIndexColumn={showIndexColumn} />

apps/client/src/views/cuesheet/CuesheetPage.module.scss

@@ -5,9 +5,10 @@
   padding: 1rem 0.5rem;
 
   display: grid;
-  grid-template-rows: 3rem auto 1fr;
+  grid-template-rows: 3rem auto auto 1fr;
   grid-template-areas:
           'overview'
+          'progress'
           'settings'
           'table';
   gap: 1rem;

apps/client/src/views/cuesheet/cuesheet-progress/CuesheetProgress.module.scss

@@ -1,3 +1,4 @@
 .progressOverride {
-    height: 1rem;
+  height: 1rem;
+  grid-area: progress;
 }

apps/client/src/views/cuesheet/cuesheet-table-settings/CuesheetTableSettings.module.scss

@@ -1,6 +1,6 @@
 .tableSettings {
   grid-area: settings;
-  padding: 0.5rem 1rem;
+  padding-inline: 0.5rem;
   display: flex;
   gap: 5rem;
   font-size: $inner-section-text-size;