Move settings to upper right and enabled scrollable appbar

frontend/src/App.tsx

@@ -1055,21 +1055,10 @@ const App = () => {
         }}
       >
         <Toolbar>
-          <Tooltip title="LLM Settings">
+          {
-            <IconButton
+            mobileOpen === false &&
-              color="inherit"
+            <Box sx={{ display: "flex", flexGrow: 1 }}>
-              aria-label="open drawer"
+              <Tabs sx={{ display: "flex", flexGrow: 1 }} value={tab} indicatorColor="secondary"
-              edge="start"
-              onClick={handleDrawerToggle}
-              sx={{ mr: 2 }}
-            >
-              <SettingsIcon />
-            </IconButton>
-          </Tooltip>
-
-          {mobileOpen === false &&
-          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-            <Tabs value={tab} indicatorColor="secondary"
                 textColor="inherit"
                 variant="scrollable"
                 allowScrollButtonsMobile
@@ -1080,8 +1069,19 @@ const App = () => {
                 <Tab label="Context Visualizer" />
                 <Tab label="About" />
               </Tabs>
-            </Box>}
 
+                <Tooltip title="LLM Settings">
+                  <IconButton
+                    color="inherit"
+                    aria-label="open drawer"
+                    edge="end"
+                    onClick={handleDrawerToggle}
+                  >
+                    <SettingsIcon />
+                  </IconButton>
+                </Tooltip>
+            </Box>
+          }
           {
             mobileOpen === true &&
             <Tooltip title="Close Settings">