Layout adjustments

src/App.tsx

@@ -43,6 +43,10 @@ import {
   tuneParsingError,
 } from './pages/auth/notifications';
 import { divider } from './data/constants';
+import {
+  collapsedSidebarWidth,
+  sidebarWidth,
+} from './components/Tune/SideBar';
 
 import 'uplot/dist/uPlot.min.css';
 import 'react-perfect-scrollbar/dist/css/styles.css';
@@ -68,7 +72,7 @@ const mapStateToProps = (state: AppState) => ({
 });
 
 const App = ({ ui, tuneData }: { ui: UIState, tuneData: TuneDataState }) => {
-  const margin = ui.sidebarCollapsed ? 80 : 250;
+  const margin = ui.sidebarCollapsed ? collapsedSidebarWidth : sidebarWidth;
   const { getTune } = useDb();
   const [isLoading, setIsLoading] = useState(false);
   const navigate = useNavigate();
@@ -158,8 +162,8 @@ const App = ({ ui, tuneData }: { ui: UIState, tuneData: TuneDataState }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tuneId]);
 
-  const ContentFor = useCallback((props: { element: ReactNode, marginLeft?: number, fullScreen?: boolean }) => {
-    const { element, marginLeft, fullScreen } = props;
+  const ContentFor = useCallback((props: { element: ReactNode, marginLeft?: number, bottomOffset?: boolean }) => {
+    const { element, marginLeft, bottomOffset } = props;
 
     return (
       <Layout style={{ marginLeft }}>
@@ -167,7 +171,7 @@ const App = ({ ui, tuneData }: { ui: UIState, tuneData: TuneDataState }) => {
           <Content>
             <Suspense fallback={<Loader />}>{element}</Suspense>
             {/* dummy element to mitigate mobile browsers navbar offset */}
-            {!fullScreen && <div style={{ marginTop: 60 }}>&nbsp;</div>}
+            {!bottomOffset && <div style={{ marginTop: 60 }}>&nbsp;</div>}
           </Content>
         </Layout>
       </Layout>
@@ -186,10 +190,10 @@ const App = ({ ui, tuneData }: { ui: UIState, tuneData: TuneDataState }) => {
           <Route path={Routes.HUB} element={<ContentFor element={<Hub />} />} />
           <Route path={Routes.TUNE_ROOT} element={<ContentFor element={<Info />} />} />
           <Route path={`${Routes.TUNE_TUNE}/*`} element={<ContentFor marginLeft={margin} element={<Tune />} />} />
-          <Route path={Routes.TUNE_LOGS} element={<ContentFor marginLeft={margin} fullScreen element={<Logs />} />} />
-          <Route path={Routes.TUNE_LOGS_FILE} element={<ContentFor marginLeft={margin} fullScreen element={<Logs />} />} />
-          <Route path={Routes.TUNE_DIAGNOSE} element={<ContentFor marginLeft={margin} fullScreen element={<Diagnose />} />} />
-          <Route path={Routes.TUNE_DIAGNOSE_FILE} element={<ContentFor marginLeft={margin} fullScreen element={<Diagnose />} />} />
+          <Route path={Routes.TUNE_LOGS} element={<ContentFor marginLeft={margin} bottomOffset element={<Logs />} />} />
+          <Route path={Routes.TUNE_LOGS_FILE} element={<ContentFor marginLeft={margin} bottomOffset element={<Logs />} />} />
+          <Route path={Routes.TUNE_DIAGNOSE} element={<ContentFor marginLeft={margin} bottomOffset element={<Diagnose />} />} />
+          <Route path={Routes.TUNE_DIAGNOSE_FILE} element={<ContentFor marginLeft={margin} bottomOffset element={<Diagnose />} />} />
           <Route path={`${Routes.UPLOAD}/*`} element={<ContentFor element={<Upload />} />} />
 
           <Route path={Routes.LOGIN} element={<ContentFor element={<Login formRole={FormRoles.LOGIN} />} />} />

src/components/Tune/SideBar.tsx

@@ -69,10 +69,13 @@ interface SideBarProps {
   matchedPath: PathMatch<'dialog' | 'tuneId' | 'category'>;
 };
 
+export const sidebarWidth = 250;
+export const collapsedSidebarWidth = 50;
+
 const SideBar = ({ config, tune, ui, navigation, matchedPath }: SideBarProps) => {
-  const sidebarWidth = 250;
   const siderProps = {
     width: sidebarWidth,
+    collapsedWidth: collapsedSidebarWidth,
     collapsible: true,
     breakpoint: 'xl',
     collapsed: ui.sidebarCollapsed,

src/css/App.less

@@ -3,7 +3,6 @@
 // @import './themes/light.less';
 @import './themes/dark.less';
 @import './themes/common.less';
-@import './themes/ant.less';
 @import './overrides.less';
 @import './animations.less';
 

src/css/overrides.less

@@ -22,6 +22,19 @@ reach-portal > div {
   backdrop-filter: blur(3px);
 }
 
-.ant-menu-submenu-selected {
-  background-color: @primary-color;
+.ant-menu {
+  border-color: transparent;
+}
+
+.ant-layout-sider-trigger {
+  bottom: @layout-footer-height;
+  border-radius: @border-radius-base;
+}
+
+.ant-empty {
+  opacity: 0.6;
+}
+
+.ant-popover-content {
+  box-shadow: @box-shadow;
 }

src/css/themes/ant.less

@@ -1,16 +0,0 @@
-.ant-menu {
-  border-color: transparent;
-}
-
-.ant-layout-sider-trigger {
-  bottom: @layout-footer-height;
-  // .border-right;
-}
-
-.ant-empty {
-  opacity: 0.6;
-}
-
-.ant-popover-content {
-  box-shadow: @box-shadow;
-}

src/pages/Diagnose.tsx

@@ -48,13 +48,16 @@ import { Routes } from '../routes';
 import { removeFilenameSuffix } from '../pocketbase';
 import useServerStorage from '../hooks/useServerStorage';
 import { isAbortedRequest } from '../utils/error';
+import {
+  collapsedSidebarWidth,
+  sidebarWidth,
+} from '../components/Tune/SideBar';
 
 const { Content } = Layout;
 const { Step } = Steps;
 
 const edgeUnknown = 'Unknown';
 const badgeStyle = { backgroundColor: Colors.TEXT };
-const sidebarWidth = 250;
 
 const mapStateToProps = (state: AppState) => ({
   ui: state.ui,
@@ -93,6 +96,7 @@ const Diagnose = ({
   }, []);
   const siderProps = {
     width: sidebarWidth,
+    collapsedWidth: collapsedSidebarWidth,
     collapsible: true,
     breakpoint: 'xl',
     collapsed: ui.sidebarCollapsed,

src/pages/Logs.tsx

@@ -64,11 +64,14 @@ import { Routes } from '../routes';
 import { removeFilenameSuffix } from '../pocketbase';
 import { isAbortedRequest } from '../utils/error';
 import { WorkerOutput } from '../workers/logParserWorker';
+import {
+  collapsedSidebarWidth,
+  sidebarWidth,
+} from '../components/Tune/SideBar';
 
 const { Content } = Layout;
 const { Step } = Steps;
 const edgeUnknown = 'Unknown';
-const sidebarWidth = 250;
 const minCanvasHeightInner = 500;
 const badgeStyle = { backgroundColor: Colors.TEXT };
 
@@ -123,6 +126,7 @@ const Logs = ({
 
   const siderProps = {
     width: sidebarWidth,
+    collapsedWidth: collapsedSidebarWidth,
     collapsible: true,
     breakpoint: 'xl',
     collapsed: ui.sidebarCollapsed,