Set status page adjustments #1800

sm-sayedi · 2025-08-13T20:14:33Z

Fixes: #1769
Fixes: #1770
Fixes: #1771

Screenshots

Landscape mode

Before	After

Consistent horizontal padding

Before	After

Status-suggestion touch feedback

Before	After (no feedback)

Bottom shadow

Before	After

Space between emoji button and text input

Emoji button pressed

Before	After

Emoji button not pressed

Before	After

chrisbobbe · 2025-08-15T02:34:50Z

Thanks! Could you post before-and-after screenshots? For #1771 I see screenshots of two proposed fixes, but they only show what the button looks like when it's pressed, which is not the common case. For whichever proposal is implemented here, could you please include a screenshot with and without that touch feedback?

chrisbobbe

Thanks! And here are some comments on the code.

chrisbobbe · 2025-08-15T02:36:16Z

lib/widgets/set_status.dart

-            top: 8, end: 10,
-            // In Figma design, this is 4px, be we compensate for that in
-            // [SingleChildScrollView.padding] below.
-            bottom: 0),
-          child: Row(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              IconButton(
-                onPressed: chooseStatusEmoji,
-                style: IconButton.styleFrom(
-                  splashFactory: NoSplash.splashFactory,
-                  foregroundColor: designVariables.icon,
-                  tapTargetSize: MaterialTapTargetSize.shrinkWrap,
-                  padding: EdgeInsets.symmetric(
-                    vertical: 8,
-                    // In Figma design, there is no horizontal padding, but we
-                    // provide it in order to create a proper tap target size.
-                    horizontal: 8)),
-                icon: Row(spacing: 4, children: [
-                  ValueListenableBuilder(
-                    valueListenable: statusChange,
-                    builder: (_, change, _) {
-                      final emoji = change.emoji.or(oldStatus.emoji);
-                      return emoji == null
-                        ? const Icon(ZulipIcons.smile, size: 24)
-                        : UserStatusEmoji(emoji: emoji, size: 24, neverAnimate: false);
-                    }),
-                  Icon(ZulipIcons.chevron_down, size: 16),
-                ]),
-              ),
-              Expanded(child: TextField(
-                controller: statusTextController,
-                minLines: 1,
-                maxLines: 2,
-                // The limit on the size of the status text is 60 characters.
-                // See: https://zulip.com/api/update-status#parameter-status_text
-                maxLength: 60,
-                cursorColor: designVariables.textInput,
-                textCapitalization: TextCapitalization.sentences,
-                style: TextStyle(fontSize: 19, height: 24 / 19),
-                decoration: InputDecoration(
-                  // TODO: display a counter as suggested in CZO discussion:
-                  //   https://chat.zulip.org/#narrow/channel/530-mobile-design/topic/Set.20user.20status/near/2224549
-                  counterText: '',
-                  hintText: localizations.statusTextHint,
-                  hintStyle: TextStyle(color: designVariables.labelSearchPrompt),
-                  isDense: true,
-                  contentPadding: EdgeInsets.symmetric(
-                    vertical: 8,
-                    // Subtracting 4 pixels to account for the internal
-                    // 4-pixel horizontal padding.
-                    horizontal: 10 - 4,
-                  ),
-                  filled: true,
-                  fillColor: designVariables.bgSearchInput,
-                  border: OutlineInputBorder(
-                    borderRadius: BorderRadius.circular(10),
-                    borderSide: BorderSide.none,
-                  )))),
-            ]),
-        ),
+      body: SafeArea(
+        bottom: false,
+        minimum: EdgeInsets.symmetric(horizontal: 8),
+        child: Column(children: [
+          Padding(
+            padding: const EdgeInsetsDirectional.only(
+              // In Figma design, this is 16px, but we compensate for that in
+              // the icon button below.
+              start: 8,
+              top: 8, end: 8,


This is a good change (10px to 8px, as I suggested in #1769), but not related to rendering in landscape mode, which is what the commit says it's about.

chrisbobbe · 2025-08-15T02:37:11Z

lib/widgets/set_status.dart

    return InkWell(
      onTap: onTap,
-      splashFactory: NoSplash.splashFactory,
-      overlayColor: WidgetStateColor.resolveWith(
-        (states) => states.any((e) => e == WidgetState.pressed)
-          ? designVariables.contextMenuItemBg.withFadedAlpha(0.20)
-          : Colors.transparent,
-      ),
+      overlayColor: WidgetStatePropertyAll(Colors.transparent),


Is the InkWell doing anything, now, that a plain GestureDetector wouldn't?

chrisbobbe · 2025-08-15T02:38:43Z

lib/widgets/set_status.dart

-          ? designVariables.contextMenuItemBg.withFadedAlpha(0.20)
-          : Colors.transparent,
-      ),
+      overlayColor: WidgetStatePropertyAll(Colors.transparent),
      child: Padding(
        padding: EdgeInsets.symmetric(vertical: 7, horizontal: 16),


From the issue:

For all page content, take 8px of horizontal external whitespace and move it to the outer SafeArea.minimum

But it looks like this commit just adds 8px of horizontal whitespace, without subtracting it from anywhere.

sm-sayedi · 2025-08-15T17:46:25Z

Thanks @chrisbobbe for the review. New revision pushed. Screenshots are also included in the PR description.

chrisbobbe · 2025-08-15T21:39:31Z

Thanks!

I'd like the first three commits to be more clear and coherent:

856df7d set-status: Fix content rendering in landscape mode
3e96f3b set-status: Make the horizontal padding consistent for page body
f402ab2 set-status: Remove the status-suggestion items touch feedback

The first says it fixes something, but it also creates a problem (or at least unintended behavior): in iPhone landscape mode there's more horizontal padding than we want:

That's because this part of the issue hasn't been done yet (at that commit):

For all page content, take 8px of horizontal external whitespace and move it to the outer SafeArea.minimum

so that 8px is added unconditionally, even though the horizontal insets are greater than 8px.

That problem is fixed in the second commit—

—but that fix isn't described in the commit message, and in any case it's neater to not introduce the problem in the first place. 🙂

The third commit could helpfully say why we're removing the touch feedback. Could just quote my reasoning in #1769 🙂. Also a nit: best to remove the touch feedback either before or in the commit that causes it to not extend to the screen edges. Design-wise, I think it looks weird for a touchable row to have non-rounded rectangular touch feedback that doesn't align with some persistently visible edge, like the edge of a row's distinctly colored surface or the edge of the screen. This is actually visible in your "Before" screenshot of the touch feedback, but not in main (try it); I'm not sure if that was intended :).

Anyway, how's this for a commit sequence:

A commit that's just a one-line change that changes 10 to 8, perhaps with a quick note in the commit message saying why (can quote the issue 🙂)
A commit that removes the touch feedback (can quote the issue for reasoning 🙂)
A commit that does the rest (introduces the SafeArea and moves the 8px from unconditional padding to SafeArea.minimum).

The other two commits LGTM:

52d4f16 set-status: Remove shadow effect at the bottom of the page
b01c643 set-status: Add a small space between emoji button and text input field

As Chris mentioned in zulip#1769 description: "Change the text-input row's end margin from 10px to 8px, to match the 8px end margin on the status suggestions (I know this goes against the Figma but I'd prefer consistency 🙂)"

As Chris mentioned in zulip#1769 description: "Remove the InkWell touch feedback on status-suggestion items. I usually like touch feedback, but the Figma doesn't specify it here, and it's not clear if we'd want it to extend through the device insets or not. Thankfully there's no network request so it should always be immediately clear that a tap was detected (the inputs will change)."

sm-sayedi · 2025-08-16T02:12:47Z

Thanks for the review. Pushed new changes.

Before this in landscape mode, the content would extend and partially hide beneath the top notch. Now the content is displayed correctly and starts just from below the notch. Fixes: zulip#1769

Fixes: zulip#1770

This will separate the emoji button from text input field when emoji button is pressed (with touch feedback shown). Fixes: zulip#1771

sm-sayedi requested a review from chrisbobbe August 13, 2025 20:28

sm-sayedi assigned chrisbobbe Aug 13, 2025

sm-sayedi added the maintainer review PR ready for review by Zulip maintainers label Aug 13, 2025

sm-sayedi force-pushed the 1769/70/71-set-status-adjustments branch 3 times, most recently from a00e41d to 07bf76c Compare August 14, 2025 01:01

sm-sayedi mentioned this pull request Aug 14, 2025

set-status: Emoji input's touch feedback too close to status-text input #1771

Open

chrisbobbe reviewed Aug 15, 2025

View reviewed changes

sm-sayedi force-pushed the 1769/70/71-set-status-adjustments branch 2 times, most recently from 3c6a36c to b01c643 Compare August 15, 2025 17:05

sm-sayedi requested a review from chrisbobbe August 15, 2025 17:46

sm-sayedi force-pushed the 1769/70/71-set-status-adjustments branch from b01c643 to 93aee77 Compare August 16, 2025 02:11

sm-sayedi added 2 commits August 16, 2025 06:41

sm-sayedi force-pushed the 1769/70/71-set-status-adjustments branch from 93aee77 to 069e10d Compare August 16, 2025 02:11

sm-sayedi added 3 commits August 16, 2025 06:55

set-status: Fix content rendering in landscape mode

22ebc5e

Before this in landscape mode, the content would extend and partially hide beneath the top notch. Now the content is displayed correctly and starts just from below the notch. Fixes: zulip#1769

set-status: Remove shadow effect from the bottom of the page

5323a8e

Fixes: zulip#1770

set-status: Add a small space between emoji button and text input field

a1b344c

This will separate the emoji button from text input field when emoji button is pressed (with touch feedback shown). Fixes: zulip#1771

sm-sayedi force-pushed the 1769/70/71-set-status-adjustments branch from 069e10d to a1b344c Compare August 16, 2025 02:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Set status page adjustments #1800

Set status page adjustments #1800

Uh oh!

sm-sayedi commented Aug 13, 2025 •

edited

Loading

Uh oh!

chrisbobbe commented Aug 15, 2025

Uh oh!

chrisbobbe left a comment

Uh oh!

chrisbobbe Aug 15, 2025 •

edited

Loading

Uh oh!

chrisbobbe Aug 15, 2025

Uh oh!

chrisbobbe Aug 15, 2025

Uh oh!

sm-sayedi commented Aug 15, 2025

Uh oh!

chrisbobbe commented Aug 15, 2025 •

edited

Loading

Uh oh!

sm-sayedi commented Aug 16, 2025

Uh oh!

Uh oh!

Set status page adjustments #1800

Are you sure you want to change the base?

Set status page adjustments #1800

Uh oh!

Conversation

sm-sayedi commented Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Landscape mode

Consistent horizontal padding

Status-suggestion touch feedback

Bottom shadow

Space between emoji button and text input

Emoji button pressed

Emoji button not pressed

Uh oh!

chrisbobbe commented Aug 15, 2025

Uh oh!

chrisbobbe left a comment

Choose a reason for hiding this comment

Uh oh!

chrisbobbe Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chrisbobbe Aug 15, 2025

Choose a reason for hiding this comment

Uh oh!

chrisbobbe Aug 15, 2025

Choose a reason for hiding this comment

Uh oh!

sm-sayedi commented Aug 15, 2025

Uh oh!

chrisbobbe commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sm-sayedi commented Aug 16, 2025

Uh oh!

Uh oh!

sm-sayedi commented Aug 13, 2025 •

edited

Loading

chrisbobbe Aug 15, 2025 •

edited

Loading

chrisbobbe commented Aug 15, 2025 •

edited

Loading