chore: bump version to 4.11.106 [skip ci]

overlay/src/app/features/ShareRoomPicker.tsx

@@ -5,6 +5,7 @@ import FocusTrap from 'focus-trap-react';
 import {
   Avatar,
   Box,
+  Button,
   Header,
   Icon,
   IconButton,
@@ -127,7 +128,6 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
 
   return (
     <Overlay open backdrop={<OverlayBackdrop />}>
-      <OverlayCenter>
       <FocusTrap
         focusTrapOptions={{
           initialFocus: false,
@@ -136,11 +136,19 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
           escapeDeactivates: stopPropagation,
         }}
       >
-          <Modal size="300">
+        <Box
-            <Box grow="Yes" direction="Column" style={{ maxHeight: '85vh' }}>
+          grow="Yes"
+          direction="Column"
+          style={{
+            position: 'fixed',
+            inset: 0,
+            zIndex: 999,
+            backgroundColor: '#1a1d23',
+          }}
+        >
           <Header
             size="500"
-                style={{ padding: config.space.S400, paddingTop: config.space.S500 }}
+            style={{ padding: config.space.S400, paddingTop: '60px' }}
           >
             <Box grow="Yes" direction="Column" gap="100">
               <Text size="H4">Share to Room</Text>
@@ -161,9 +169,7 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
 
           <Box
             style={{
-                  padding: config.space.S400,
+              padding: config.space.S200,
-                  paddingTop: config.space.S200,
-                  paddingBottom: config.space.S200,
             }}
           >
             <Input
@@ -174,14 +180,12 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
               variant="Background"
               outlined
               autoFocus
+              style={{ width: '100%' }}
             />
           </Box>
 
           <Scroll ref={scrollRef} size="300" hideTrack style={{ flex: 1, minHeight: 0 }}>
-                <Box
+            <Box style={{ padding: config.space.S300, paddingTop: config.space.S300 }} direction="Column">
-                  style={{ padding: config.space.S300, paddingTop: 0 }}
-                  direction="Column"
-                >
               {vItems.length === 0 && (
                 <Box
                   style={{ padding: `${config.space.S700} 0` }}
@@ -200,9 +204,7 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
                   </Text>
                 </Box>
               )}
-                  <Box
+              <Box style={{ position: 'relative', height: virtualizer.getTotalSize() }}>
-                    style={{ position: 'relative', height: virtualizer.getTotalSize() }}
-                  >
                 {vItems.map((vItem) => {
                   const roomId = items[vItem.index];
                   const room = getRoom(roomId);
@@ -258,16 +260,14 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
             </Box>
           </Scroll>
         </Box>
-          </Modal>
       </FocusTrap>
-      </OverlayCenter>
 
       {confirmRoomId && (() => {
         const room = getRoom(confirmRoomId);
         const roomName = room?.name ?? confirmRoomId;
         const isDm = mDirects.has(confirmRoomId);
         return (
-          <OverlayCenter>
+          <OverlayCenter style={{ zIndex: 9999 }}>
             <FocusTrap
               focusTrapOptions={{
                 initialFocus: false,
@@ -275,8 +275,8 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
                 escapeDeactivates: stopPropagation,
               }}
             >
-              <Modal size="300">
+              <Modal size="300" style={{ zIndex: 9999 }}>
-                <Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
+                <Box direction="Column" gap="100" style={{ padding: config.space.S400 }}>
                   <Box direction="Column" gap="200">
                     <Text size="H4">Share to {isDm ? 'Person' : 'Room'}?</Text>
                     <Text size="T300" priority="300">
@@ -284,30 +284,20 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
                     </Text>
                   </Box>
                   <Box gap="200" justifyContent="End">
-                    <button
+                    <Button
                       onClick={handleCancelConfirm}
-                      style={{
+                      variant="Secondary"
-                        padding: `${config.space.S200} ${config.space.S400}`,
+                      size="400"
-                        borderRadius: config.radii.R400,
-                        border: 'none',
-                        background: 'transparent',
-                        cursor: 'pointer',
-                      }}
                     >
                       <Text size="B400">Cancel</Text>
-                    </button>
+                    </Button>
-                    <button
+                    <Button
                       onClick={handleConfirm}
-                      style={{
+                      variant="Primary"
-                        padding: `${config.space.S200} ${config.space.S400}`,
+                      size="400"
-                        borderRadius: config.radii.R400,
-                        border: 'none',
-                        background: 'var(--bg-primary)',
-                        cursor: 'pointer',
-                      }}
                     >
                       <Text size="B400">Share</Text>
-                    </button>
+                    </Button>
                   </Box>
                 </Box>
               </Modal>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paarrot",
-  "version": "4.11.103",
+  "version": "4.11.106",
   "description": "Paarrot - A Matrix client based on Cinny",
   "engines": {
     "node": ">=18.0.0"