diff --git a/mitra_app/lib/features/chat/screens/mitra_chat_screen.dart b/mitra_app/lib/features/chat/screens/mitra_chat_screen.dart index 8e8edc2..549fd5a 100644 --- a/mitra_app/lib/features/chat/screens/mitra_chat_screen.dart +++ b/mitra_app/lib/features/chat/screens/mitra_chat_screen.dart @@ -740,58 +740,57 @@ class _MitraChatBodyContentState extends ConsumerState<_MitraChatBodyContent> { crossAxisAlignment: CrossAxisAlignment.center, children: [ Expanded( - child: Container( + // Pattern lifted from client_app/chat_screen.dart::_InputBar + // — same shape, same vertical-centering trick. Key bits: + // - Material + StadiumBorder = pill outline + proper focus + // clipping + // - Center wrapper centers the (isCollapsed) TextField + // - `constraints: BoxConstraints()` overrides the app-wide + // InputDecorationTheme min-height (set in halo_theme for + // form fields). Without it, the field claims ~48dp and + // refuses to collapse — textAlignVertical becomes a + // no-op against the parent's 44dp height. + child: SizedBox( height: 44, - // alignment.center positions the TextField on the vertical - // midline of the 44dp container. Without this, isDense's - // small intrinsic height docks to the top of the parent - // (no implicit vertical centering for Container children). - alignment: Alignment.center, - padding: const EdgeInsets.symmetric(horizontal: 16), - decoration: const BoxDecoration( - // White bg so the pill stands out against the cream page - // (HaloTokens.bg) — previously the pill bg matched the - // page exactly, leaving only the very-light border to - // define the shape (looked like a soft shadow). Border - // color is unchanged — the visible outline keeps the - // same tone. + child: Material( color: HaloTokens.surface, - borderRadius: HaloRadius.pill, - border: Border.fromBorderSide( - BorderSide(color: HaloTokens.border), + shape: const StadiumBorder( + side: BorderSide(color: HaloTokens.border), ), - ), - // Vertical centering recipe: Container.alignment.center - // positions the TextField on the midline; textAlignVertical - // with a positive y (~0.4) nudges the baseline down so the - // optical center of Latin lowercase glyphs lines up with - // the pill midline, not just the baseline. With y=0 (true - // center), the field's line-box centers but Latin text - // bodies sit in the upper half because the baseline is at - // ~75% of line height — leaving descender space empty - // below. y=0.4 shifts down to match the visual midline. - child: TextField( - controller: widget.messageController, - onChanged: widget.onTextChanged, - textInputAction: TextInputAction.send, - onSubmitted: (_) => widget.onSend(), - maxLines: 1, - textAlignVertical: const TextAlignVertical(y: 0.4), - style: const TextStyle( - fontSize: 13.5, - color: HaloTokens.ink, - ), - decoration: const InputDecoration( - hintText: 'ketik balasan...', - hintStyle: TextStyle(color: HaloTokens.inkMuted, fontSize: 13.5), - isDense: true, - contentPadding: EdgeInsets.zero, - border: InputBorder.none, - enabledBorder: InputBorder.none, - focusedBorder: InputBorder.none, - disabledBorder: InputBorder.none, - errorBorder: InputBorder.none, - focusedErrorBorder: InputBorder.none, + clipBehavior: Clip.antiAlias, + child: Center( + child: TextField( + controller: widget.messageController, + onChanged: widget.onTextChanged, + textInputAction: TextInputAction.send, + onSubmitted: (_) => widget.onSend(), + maxLines: 1, + textAlignVertical: TextAlignVertical.center, + style: const TextStyle( + fontFamily: HaloTokens.fontBody, + fontSize: 13.5, + color: HaloTokens.ink, + ), + decoration: const InputDecoration( + filled: false, + fillColor: Colors.transparent, + border: InputBorder.none, + enabledBorder: InputBorder.none, + focusedBorder: InputBorder.none, + errorBorder: InputBorder.none, + focusedErrorBorder: InputBorder.none, + disabledBorder: InputBorder.none, + isCollapsed: true, + contentPadding: EdgeInsets.symmetric(horizontal: 16), + constraints: BoxConstraints(), + hintText: 'ketik balasan...', + hintStyle: TextStyle( + fontFamily: HaloTokens.fontBody, + fontSize: 13.5, + color: HaloTokens.inkMuted, + ), + ), + ), ), ), ),