enhance text compose experience

js/src/features/compose/text-compose-step.tsx

@@ -82,7 +82,7 @@ export function TextComposeStep({
   );
 
   const keyboardHints = (
-    <div className="absolute bottom-8 flex items-center gap-4 text-sm text-white/50">
+    <div className="absolute bottom-4 flex items-center gap-4 text-sm text-white/50">
       <span>
         <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
           Esc
@@ -150,17 +150,20 @@ export function TextComposeStep({
       )}
       {...dropZoneProps}
     >
-      <div className="mx-8 flex max-h-[calc(100%-6rem)] w-full flex-col gap-2 overflow-y-auto rounded-2xl bg-white/10 p-5 backdrop-blur-md">
+      <div className="mx-8 flex h-[calc(100%-8rem)] w-full flex-col rounded-2xl border border-white/10 bg-white/5 p-5 backdrop-blur-xl">
         <textarea
           ref={textareaRef}
           value={textContent}
           onChange={(e) => onTextChange(e.target.value)}
           onKeyDown={handleKeyDown}
           placeholder="Type a message..."
-          className="w-full resize-none border-none bg-transparent text-base leading-relaxed text-white placeholder-white/40 outline-none"
-          rows={6}
+          className="min-h-0 flex-1 resize-none border-none bg-transparent text-base leading-relaxed text-white placeholder-white/40 outline-none"
         />
-        {strip}
+        {hasEnrichments && (
+          <div className="shrink-0 border-t border-white/10 pt-3">
+            {strip}
+          </div>
+        )}
       </div>
       {keyboardHints}
     </div>