fix(frontend): drop fixed height on about-page login card by bobbai00 · Pull Request #4890 · apache/texera

bobbai00 · 2026-05-04T03:23:48Z

What changes were proposed in this PR?

The login card on /about (logged out) overlapped the workflow GUI screenshot (#4879). Root cause: local-login.component.scss had height: 350px hardcoded on the inner .form. Drop it so the card sizes to its content; also tighten the gap between input fields.

Login:

Sign Up:

Any related issues, documentation, discussions?

Closes #4879.

How was this PR tested?

Visual check (screenshots above); AboutComponent smoke spec passes.

Was this PR authored or co-authored using generative AI tooling?

Generated-by: Claude Code (claude-opus-4-7)

Yicong-Huang · 2026-05-04T03:26:07Z

@bobbai00 for frontend changes, please include a screenshot.

codecov-commenter · 2026-05-04T03:29:42Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 43.11%. Comparing base (a15d4ff) to head (a017362).

Additional details and impacted files

@@             Coverage Diff              @@
##               main    #4890      +/-   ##
============================================
- Coverage     43.16%   43.11%   -0.05%     
  Complexity     2153     2153              
============================================
  Files           915      986      +71     
  Lines         32208    36910    +4702     
  Branches       3256     4213     +957     
============================================
+ Hits          13902    15915    +2013     
- Misses        17462    19844    +2382     
- Partials        844     1151     +307

Flag	Coverage Δ
frontend	`33.99% <ø> (+4.50%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

The login card sat absolute at top:140px / right:0, but its inner .form had height:350px hardcoded. With padding/margin/border, the box was ~426px tall — overflowing past the bullet list and overlapping the workflow GUI screenshot below (apache#4879). Drop the fixed height so the card sizes to its content (Sign In: 2 inputs + button; Sign Up: 3 inputs + button). The card stays where it was on the page; it's just no longer artificially tall. Closes apache#4879 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Closes apache#4879 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

- top: 110 -> 120 (final tuning) - nz-form-item margin-bottom: 24 -> 12 to reduce gap between input fields Closes apache#4879 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Yicong-Huang · 2026-05-04T03:37:30Z

please add tests ;)

Closes apache#4879 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Yicong-Huang · 2026-05-04T03:45:09Z

need backport right @bobbai00 ?

Yicong-Huang · 2026-05-04T03:51:18Z

hmm I am afraid the test won't be able to backport. because the release branch is still using the old frontend testing framework. I suggest you separate to two PRs: 1 for the fix, backport it. 2 for the adding the test, only to main.

bobbai00 · 2026-05-04T03:59:30Z

hmm I am afraid the test won't be able to backport. because the release branch is still using the old frontend testing framework. I suggest you separate to two PRs: 1 for the fix, backport it. 2 for the adding the test, only to main.

Splitted

### What changes were proposed in this PR? The login card on `/about` (logged out) overlapped the workflow GUI screenshot (#4879). Root cause: `local-login.component.scss` had `height: 350px` hardcoded on the inner `.form`. Drop it so the card sizes to its content; also tighten the gap between input fields. Login: <img width="1817" height="1072" alt="Screenshot 2026-05-03 at 8 35 56 PM" src="https://github.com/user-attachments/assets/c4c3630e-d80e-447b-aad7-3fbe22f3e1c7" /> Sign Up: <img width="1829" height="1088" alt="Screenshot 2026-05-03 at 8 36 22 PM" src="https://github.com/user-attachments/assets/967ebf75-50e9-4664-9892-5a5bcb563ac7" /> ### Any related issues, documentation, discussions? Closes #4879. ### How was this PR tested? Visual check (screenshots above); AboutComponent smoke spec passes. ### Was this PR authored or co-authored using generative AI tooling? Generated-by: Claude Code (claude-opus-4-7) --------- (backported from commit aedc6e2) Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

github-actions · 2026-05-04T04:11:53Z

Backport to release/v1.1.0-incubating succeeded as 1f682e6. Run

### What changes were proposed in this PR? Adds 3 unit tests to `about.component.spec.ts` covering the `*ngIf` branches in `about.component.html` that codecov flagged on #4890: - `<texera-local-login>` is hidden when the user is logged in. - It is shown when the user is logged out and `config.env.localLogin` is true. - It is hidden when the user is logged out but `config.env.localLogin` is false. Provides `RouterTestingModule.withRoutes([])` plus a `NotificationService` spy via `useValue` so the real `LocalLoginComponent` renders under TestBed (matching the spy-mocked `NotificationService` pattern in `download.service.spec.ts` and `workflow-result-export.service.spec.ts`). ### Any related issues, documentation, discussions? Sibling of #4890 (the actual `/about` layout fix). Split out of #4890 because the release branch still uses the old frontend testing framework, and the layout fix needs to backport cleanly without dragging the new spec along. This PR targets `main` only — no backport. ### How was this PR tested? `yarn ng test --watch=false --include=\"src/app/hub/component/about/about.component.spec.ts\"` → 4 passed. ### Was this PR authored or co-authored using generative AI tooling? Generated-by: Claude Code (claude-opus-4-7) Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

github-actions Bot assigned bobbai00 May 4, 2026

github-actions Bot added fix frontend Changes related to the frontend GUI labels May 4, 2026

bobbai00 force-pushed the fix/4879-about-page-login-overlap branch from b1af15b to a7cd7a6 Compare May 4, 2026 03:30

bobbai00 changed the title ~~fix(frontend): about page login card no longer overlaps screenshot~~ fix(frontend): drop fixed height on about-page login card May 4, 2026

bobbai00 force-pushed the fix/4879-about-page-login-overlap branch from 75fe64a to 69761ce Compare May 4, 2026 03:32

fix(frontend): raise about-page login card to top:110px

c5809dc

Closes apache#4879 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

bobbai00 force-pushed the fix/4879-about-page-login-overlap branch from 69761ce to c5809dc Compare May 4, 2026 03:33

fix(frontend): tighten about-page login card spacing

f8a0ed6

- top: 110 -> 120 (final tuning) - nz-form-item margin-bottom: 24 -> 12 to reduce gap between input fields Closes apache#4879 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

fix(frontend): set about-page login card top to 130px

2ffd559

Closes apache#4879 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

bobbai00 force-pushed the fix/4879-about-page-login-overlap branch from bc1e9d4 to 2ffd559 Compare May 4, 2026 03:39

bobbai00 added the release/v1.1.0-incubating back porting to release/v1.1.0-incubating label May 4, 2026

bobbai00 requested a review from Yicong-Huang May 4, 2026 03:50

bobbai00 force-pushed the fix/4879-about-page-login-overlap branch 2 times, most recently from 9e6049a to 2ffd559 Compare May 4, 2026 03:56

bobbai00 mentioned this pull request May 4, 2026

test(frontend): cover about-page login visibility branches #4894

Merged

bobbai00 added the emergency Pull requests that need to be merged ASAP label May 4, 2026

Yicong-Huang approved these changes May 4, 2026

View reviewed changes

Yicong-Huang enabled auto-merge (squash) May 4, 2026 03:59

Merge branch 'main' into fix/4879-about-page-login-overlap

a017362

Yicong-Huang merged commit aedc6e2 into apache:main May 4, 2026
22 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(frontend): drop fixed height on about-page login card#4890

fix(frontend): drop fixed height on about-page login card#4890
Yicong-Huang merged 5 commits into
apache:mainfrom
bobbai00:fix/4879-about-page-login-overlap

bobbai00 commented May 4, 2026 •

edited

Loading

Uh oh!

Yicong-Huang commented May 4, 2026

Uh oh!

codecov-commenter commented May 4, 2026 •

edited

Loading

Uh oh!

Yicong-Huang commented May 4, 2026

Uh oh!

Yicong-Huang commented May 4, 2026

Uh oh!

Yicong-Huang commented May 4, 2026

Uh oh!

bobbai00 commented May 4, 2026

Uh oh!

Uh oh!

github-actions Bot commented May 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

bobbai00 commented May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What changes were proposed in this PR?

Any related issues, documentation, discussions?

How was this PR tested?

Was this PR authored or co-authored using generative AI tooling?

Uh oh!

Yicong-Huang commented May 4, 2026

Uh oh!

codecov-commenter commented May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Yicong-Huang commented May 4, 2026

Uh oh!

Yicong-Huang commented May 4, 2026

Uh oh!

Yicong-Huang commented May 4, 2026

Uh oh!

bobbai00 commented May 4, 2026

Uh oh!

Uh oh!

github-actions Bot commented May 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bobbai00 commented May 4, 2026 •

edited

Loading

codecov-commenter commented May 4, 2026 •

edited

Loading