Center align Workspace name on web and mobile web

[MitchExpensify]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Click "+" in new.expensify.com
2. Click "Create Workspace"
3. Workspace name is not aligned in the left hand pane

Expected Result:

I would expect the Workspace name to be center aligned under the workspace avatar

Actual Result:

Workspace name is not center aligned under the workspace avatar

Workaround:

Ignore

Platform:

Where is this issue occurring?

• Web
• Mobile Web

Version Number: v1.0.88-0
Notes/Photos/Videos:

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @kevinksullivan (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[kakajann]

Proposal

add styles.textAlignCenter to Text in here:

App/src/pages/workspace/WorkspaceSidebar.js

Lines 140 to 149 in ae38f1b

	<Tooltip text={policy.name}>
	<Text
	numberOfLines={1}
	style={[
	styles.displayName,
	]}
	>
	{policy.name}
	</Text>
	</Tooltip>

[kevinksullivan]

Posted

https://www.upwork.com/jobs/~01bf967f71df7a2c62

[MelvinBot]

Triggered auto assignment to @deetergp (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[akshayasalvi]

Proposal

I feel there are two issues with the title of the Workspace name. One is the alignment, second is the fontSize. If you see the there's no difference in the title of the workspace and the menuItems.

We could do the following:

<Text
    numberOfLines={1}
    style={[
        styles.displayName,
        styles.textAlignCenter,  // to center align.
        {. // can be added to styles.js
            fontSize: variables.fontSizeMidLarge.  // this is size 22, we can even try fontSizeXLarge: 24
        }
    ]}
>
    {policy.name}
</Text>

[PrashantMangukiya]

Proposed Solution:

Updates: I just fetched recent version of the app (1.0.88-2), compiled and tested. Now my previous solution (to add styles.alignSelfCenter to text component ) not working as expected in all platform.

So now I suggest to add styles.textAlignCenter (instead of styles.alignSelfCenter) to Text component as other people also suggested before me. I will not mind if project awarded to them as they suggested before me.

So now code looks like below after changes: /src/pages/workspace/WorkspaceSidebar.js file.

          <Tooltip text={policy.name}>
              <Text
                  numberOfLines={1}
                  style={[
                      styles.displayName,
                      styles.textAlignCenter,    // Add this style
                  ]}
              >
                  {policy.name}
              </Text>
          </Tooltip>

Below are some screenshots I taken on latest version (1.0.88-2) by adding styles.textAlignCenter to Text component. It is working as expected for short and long workspace name.

Screenshots

Web

With workspace name too long

Mobile Web

With workspace name too long

Desktop

With workspace name too long

iOS

With workspace name too long

Android 7.1.1

With workspace name too long

If solution considered then kindly accept my Upwork proposal. Once proposal accepted, I will do final testing and submit pull request within 2 days.

My Upwork profile: https://www.upwork.com/freelancers/~01c718889ed7821f82

Best Regards,
Prashant Mangukiya

[gregorjoshua]

Proposal

I think that this can be fixed by just changing
src\pages\workspace\WorkspaceSidebar.js line 133 from
styles.alignSelfCenter,
to
styles.alignItemsCenter,

Orignal:

Fixed:

[PrashantMangukiya]

Hi @gregorjoshua Thanks for the suggestion. But It is not good idea to set styles.alignItemsCenter at line 133 for Pressable componnet, because It is disturbing the Tooltip child component behaviour under it. i.e. when workspace name too long then text touches left and right side and it is not expected behaviour.

See below screenshot that shows longs workspace name touched at left and right side when we set styles.alignItemsCenter to Pressable at line 133 , it is not expected behaviour.

When workspace name too long it should truncate text and show ellipses at the end (i.e. three dots ...). I updated screenshot within my proposal, as you can see it shows expected behaviour when workspace name too long.

Thanks