adjusting layout of base when calling

app/client/web/src/ring/Ring.module.css

@@ -21,6 +21,7 @@
   padding-right: 32px;
   gap: 8px;
   background-color: var(--mantine-color-surface-4);
+  z-index: 1;
 }
 .card {
   padding: 8px;

app/client/web/src/session/Session.module.css

@@ -70,6 +70,7 @@
     }
 
     .right {
+      position: relative;
       height: 100%;
       flex-grow: 1;
       min-width: 0;
@@ -77,6 +78,13 @@
       display: flex;
       flex-direction: column;
 
+      .base {
+        display: flex;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+
       .conversation {
         display: flex;
         height: 0;

app/client/web/src/session/Session.tsx

@@ -140,9 +140,13 @@ export function Session() {
               </div>
             </div>
             <div className={classes.right}>
+              {!state.focus && (
+                <div className={classes.base}>
+                  <Base />
+                </div>
+              )}
               <Ring />
               <div className={classes.conversation}>
-                {!state.focus && <Base />}
                 {state.focus && <Conversation openDetails={openDetails} />}
               </div>
             </div>