fix: increase tab max-width to handle bigger text

[palashkaria]

Description

Fixes: https://github.com/appsmithorg/appsmith/issues/22455 Fixed by increase the max-width from 138px to 180px.

PR fixes following issue(s):

Fixes # (issue number): https://github.com/appsmithorg/appsmith/issues/22455

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)

Testing

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. Tested by adding a long text and verifying that it's visible

Delete anything that is not relevant

• [x] Manual

Checklist:

Dev activity

• [x] My code follows the style guidelines of this project
• [x] I have performed a self-review of my own code
• [ ] I have commented my code, particularly in hard-to-understand areas
• [ ] I have made corresponding changes to the documentation
• [x] My changes generate no new warnings
• [ ] I have added tests that prove my fix is effective or that my feature works
• [ ] New and existing unit tests pass locally with my changes
• [ ] PR is being merged under a feature flag

QA activity:

• [ ] Speedbreak features have been covered
• [ ] Test plan covers all impacted features and areas of interest
• [ ] Test plan has been peer reviewed by project stakeholders and other QA members
• [ ] Manually tested functionality on DP
• [ ] We had an implementation alignment call with stakeholders post QA Round 2
• [ ] Cypress test cases have been added and approved by SDET/manual QA
• [ ] Added Test Plan Approved label after Cypress tests were reviewed
• [ ] Added Test Plan Approved label after JUnit tests were reviewed

[welcome[bot]]

Welcome to the Appsmith community! Thank you for your first pull request and making this project better. 🤗 Please make sure that you raise a review request so your code change does not go unnoticed.

[somangshu]

/ok-to-test sha=22ecc5e

[github-actions[bot]]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4925871186. Workflow: Appsmith External Integration Test Workflow. Commit: 22ecc5e. PR: 23039. Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=23039&runId=4925871186_1

[somangshu]

/build-deploy-preview env=release skip-test=true

[github-actions[bot]]

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/4925934289. Workflow: On demand build Docker image and deploy preview. skip-tests: ``. env: release. PR: 23039. recreate: .

[github-actions[bot]]

Deploy-Preview-URL: https://appsmith-ir5fesa6r-get-appsmith.vercel.app

[github-actions[bot]]

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/4925871186. Commit: 22ecc5e. The following are new failures, please fix them before merging the PR:

1. cypress/integration/Regression_TestSuite/ClientSideTests/Templates/Fork_Template_spec.js
2. cypress/integration/Regression_TestSuite/ServerSideTests/Postgres_DataTypes/DateTime_Spec.ts

To know the list of identified flaky tests - Refer here

[vsvamsi1]

/build-deploy-preview env=release

[vsvamsi1]

/ok-to-test sha=48da786abb6ea7bc98ef0fdc617d4ccf8af31576

[github-actions[bot]]

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/4991415825. Workflow: On demand build Docker image and deploy preview. skip-tests: ``. env: release. PR: 23039. recreate: .

[github-actions[bot]]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4991416417. Workflow: Appsmith External Integration Test Workflow. Commit: 48da786abb6ea7bc98ef0fdc617d4ccf8af31576. PR: 23039. Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=23039&runId=4991416417_1

[github-actions[bot]]

Deploy-Preview-URL: https://appsmith-mil5cwdw8-get-appsmith.vercel.app

[kamakshibhat-appsmith]

@palashkaria The default padding between two tab titles fails when we approach towards max width

[palashkaria]

@palashkaria The default padding between two tab titles fails when we approach towards max width

Isn't this the case already? This PR only changes the max-width, not spacing between tabs.

[kamakshibhat-appsmith]

@palashkaria

Isn't this the case already?

Well with our current UI , the padding looks consistent throughout.

This PR only changes the max-width, not spacing between tabs.

I think the padding fix is expected with width change, else the fix is gonna look half baked. LOOM for comparison

@dilippitchika @vsvamsi1 I don't think we need a separate PR to handle the padding case. But let me know if you feel otherwise . I will move the status accordingly

[dilippitchika]

@palashkaria i didn't expect the max-width to change the padding between tabs. Can you also make sure the padding is consistent?

[palashkaria]

This branch has been updated to fix the issue shared by @kamakshibhat-appsmith in the loom video. (thanks for the detailed repro!)

@dilippitchika @somangshu consider re-opening this PR? Or should I raise a new one?

See commit

Also, wasn't able to get to it earlier as local build had a bunch of issues; was only able to figure out the build today.

[somangshu]

@palashkaria can you raise another PR and tag us on the issue?

[palashkaria]

Done, raised & tagged here @somangshu https://github.com/appsmithorg/appsmith/pull/24797