restructure frontend and add network settings

frontend/src/theme/layout.less

@@ -1,52 +1,98 @@
 @import "theme.less";
 
-html, body, #root {
+/* root */
+html,
+body,
+#root {
   height: 100%;
   min-width: 100%;
   margin: 0;
   padding: 0;
 }
 
+/* base page colors */
 body {
   background-color: @body-background;
   color: @text-color;
+  -webkit-font-smoothing: antialiased;
 }
 
-.ant-layout {
+/* Top-level Ant layout becomes a row flex container:
+   Sidebar on the left, app-main on the right. */
+.ant-layout.app-root {
+  display: flex;
+  flex-direction: row;
+  /* sidebar + main column */
+  min-height: 100vh;
+  /* fill viewport */
+  height: 100vh;
   background: @body-background;
+  padding: 0;
+  overflow: hidden;
+  /* prevent body scrolling — content handles scrolling */
 }
 
+/* Sidebar: keep standard sider width, full height of the layout, scroll internally if needed */
+.ant-layout-sider {
+  padding-top: 64px;
+  flex: 0 0 auto;
+  height: 100%;
+  min-height: 0;
+  /* allow internal overflow to work */
+  background: @layout-background;
+  overflow: auto;
+  /* if sidebar items exceed height, they scroll inside sider */
+  position: relative;
+  li span {
+    font-size: @font-size-slider;
+  }
+}
+
+/* Inner layout (app-main) is a column flex that occupies the remaining width */
+.ant-layout.app-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  /* grow to fill remaining area */
+  min-height: 0;
+  /* critical so children can scroll */
+  background: transparent;
+}
+
+/* Header: not part of content scroll */
 .ant-layout-header {
+  flex: 0 0 64px;
+  height: 64px;
+  line-height: 64px;
   background: @layout-header-background;
   color: @text-color;
   font-size: @font-size-header;
-  position: sticky;
-  top: 0px;
-  left: 0px;
-  overflow: auto;
+  position: relative;
+  overflow: hidden;
 }
 
+/* Content area becomes the only scrollable pane */
 .ant-layout-content {
-  background: @component-background;
-  min-height: calc(100vh - 64px - 70px); // header + footer height
-}
-
-.ant-layout-sider{
-  li span{  font-size: @font-size-slider;}
-  height: calc(100vh - 64px - 70px);
-  background: @component-background;
-  top: 64px;
+  flex: 1 1 auto;
+  min-height: 0;
   overflow: auto;
-  position: sticky;
+  /* this makes the main content scrollable */
+  background: @component-background;
+  padding: 24px;
 }
 
+/* Footer: fixed at bottom of app-main */
 .ant-layout-footer {
-  background: @component-background;
+  flex: 0 0 10px;
+  height: 10px;
+  line-height: 10px;
+  background: @layout-background;
   color: @text-color-secondary;
   text-align: center;
-  width: auto;
+  border-top: 1px solid fade(@text-color-secondary, 90%);
 }
 
+/* Menu visuals */
 .ant-menu-dark {
   background: @menu-dark-bg;
   color: @text-color;
@@ -54,4 +100,4 @@ body {
 
 .ant-menu-dark .ant-menu-item-selected {
   background-color: darken(@primary-color, 10%);
-}
+}

frontend/src/theme/theme.less

@@ -1,10 +1,11 @@
 // Dark theme colors
 @primary-color: #1DA57A;
 @text-color: #ffffff;
-@text-color-secondary: #bfbfbf;
+@text-color-secondary: #c9c9c9;
 @heading-color: #ffffff;
 @body-background: #141414;
-@component-background: #1f1f1f;
+@component-background: #dadada;
+@layout-background: #1f1f1f;
 @border-color-base: #434343;
 @border-radius-base: 8px;
 @font-size-base: 14px;