Fix typing indicator padding

src/app/features/room/RoomView.tsx

@@ -157,7 +157,9 @@ export function RoomView({ eventId }: { eventId?: string }) {
                 onEditorReset={handleResetEditor}
                 onEditLastMessageRef={editLastMessageRef}
               />
-              <RoomViewTyping room={room} />
+              <div style={{ position: 'relative', flexShrink: 0 }}>
+                <RoomViewTyping room={room} />
+              </div>
               <GlobalModalManager />
             </Box>
             <Box shrink="No" direction="Column">

src/app/features/room/RoomViewTyping.css.ts

@@ -17,6 +17,8 @@ export const RoomViewTyping = style([
     width: '100%',
     backgroundColor: color.Surface.Container,
     color: color.Surface.OnContainer,
+    position: 'absolute',
+    bottom: 0,
     animation: `${SlideUpAnime} 100ms ease-in-out`,
   },
 ]);

src/app/features/room/RoomViewTyping.tsx

@@ -1,4 +1,4 @@
-import { Box, IconButton, Text, as } from 'folds';
+import { Box, IconButton, Text, as, toRem } from 'folds';
 import { chipIcon, X } from '$components/icons/phosphor';
 import type { Room } from '$types/matrix-sdk';
 import classNames from 'classnames';
@@ -114,7 +114,13 @@ export const RoomViewTyping = as<'div', RoomViewTypingProps>(
             </>
           )}
         </Text>
-        <IconButton title="Drop Typing Status" size="300" radii="Pill" onClick={handleDropAll}>
+        <IconButton
+          title="Drop Typing Status"
+          size="300"
+          radii="Pill"
+          onClick={handleDropAll}
+          style={{ padding: toRem(2) }}
+        >
           {chipIcon(X)}
         </IconButton>
       </Box>