fix call view

Signed-off-by: Shea <nu@she-a.eu>

Author: nushea

src/app/pages/client/SidebarNav.tsx

@@ -163,7 +163,7 @@ export function SidebarNav() {
                   )}
 
                   {isCollapsed && <SettingsTab />}
-                  <Box style={{ height: toRem(70) }} alignItems="Center">
+                  <Box style={{ height: toRem(58) }} alignItems="Center">
                     <AccountSwitcherTab />
                   </Box>
                 </>

src/app/pages/client/sidebar/UserQuickTools.css.ts

@@ -4,11 +4,11 @@ import { color, config, toRem } from 'folds';
 export const UserQuickTools = style({
   backgroundColor: color.SurfaceVariant.Container,
   color: color.SurfaceVariant.OnContainer,
-  position: 'fixed',
+  position: 'absolute',
   zIndex: '1000',
   height: toRem(74),
   bottom: '0',
-  left: '0',
+  left: toRem(-66),
   padding: config.space.S300,
   borderTop: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
 });

src/app/pages/client/sidebar/UserQuickTools.tsx

@@ -27,34 +27,36 @@ export function UserQuickTools({
     <>
       {/* Doing it properly and nicely would require a major rewrite that would cause more trouble*/}
       {!isCollapsed && (
-        <Box
-          direction="Row"
-          justifyContent="SpaceBetween"
-          alignItems="Center"
-          className={css.UserQuickTools}
-          style={{
-            opacity: isResizingSidebar ? '0%' : '100%',
-            transition: isResizingSidebar ? 'opacity 0.2s ease' : 'opacity 0.5s ease',
-            width: compact ? '100%' : toRem(width),
-            paddingRight: config.space.S300,
-          }}
-        >
-          <AccountSwitcherTab isBottom />
+        <div style={{ position: 'relative' }}>
           <Box
+            direction="Row"
+            justifyContent="SpaceBetween"
+            alignItems="Center"
+            className={css.UserQuickTools}
             style={{
-              gap: config.space.S300,
+              opacity: isResizingSidebar ? '0%' : '100%',
+              transition: isResizingSidebar ? 'opacity 0.2s ease' : 'opacity 0.5s ease',
+              width: compact ? '100vw' : toRem(width),
+              paddingRight: config.space.S300,
             }}
           >
-            {!underOutstep && (
-              <>
-                <UnverifiedTab isBottom />
-                <InboxTab isBottom />
-                <SearchTab isBottom />
-              </>
-            )}
-            <SettingsTab isBottom />
+            <AccountSwitcherTab isBottom />
+            <Box
+              style={{
+                gap: config.space.S300,
+              }}
+            >
+              {!underOutstep && (
+                <>
+                  <UnverifiedTab isBottom />
+                  <InboxTab isBottom />
+                  <SearchTab isBottom />
+                </>
+              )}
+              <SettingsTab isBottom />
+            </Box>
           </Box>
-        </Box>
+        </div>
       )}
     </>
   );