refactor: implement immersive mode for mobile keyboard layout and update related styles

overlay/src/app/features/room/RoomViewFollowing.css.ts

@@ -1,12 +1,11 @@
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
-import { DefaultReset, color, config } from 'folds';
+import { DefaultReset, color, config, toRem } from 'folds';
 
 export const RoomViewFollowingPlaceholder = style([
   DefaultReset,
   {
-    display: 'none',
-    height: 0,
+    height: toRem(28),
   },
 ]);
 
@@ -14,13 +13,22 @@ export const RoomViewFollowing = recipe({
   base: [
     DefaultReset,
     {
-      minHeight: 0,
-      padding: `${config.space.S100} ${config.space.S200}`,
-      width: 'auto',
-      maxWidth: '100%',
-      backgroundColor: 'transparent',
+      minHeight: toRem(28),
+      padding: `0 ${config.space.S400}`,
+      width: '100%',
+      backgroundColor: color.Surface.Container,
       color: color.Surface.OnContainer,
       outline: 'none',
+      selectors: {
+        // Compact floating chip while the keyboard is open.
+        '[data-composer-flush="true"] &': {
+          minHeight: 0,
+          width: 'auto',
+          maxWidth: '100%',
+          padding: `${config.space.S100} ${config.space.S200}`,
+          backgroundColor: 'transparent',
+        },
+      },
     },
   ],
   variants: {