This is an automated email from the ASF dual-hosted git repository.
mengw15 pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/texera.git
The following commit(s) were added to refs/heads/main by this push:
new 8cf9e79f36 fix(frontend): keep About-page sign-in panel from
overlapping content (#5132)
8cf9e79f36 is described below
commit 8cf9e79f361b0da3ef1c23a6ac30c9172166b3e5
Author: Meng Wang <[email protected]>
AuthorDate: Mon May 18 23:37:08 2026 -0700
fix(frontend): keep About-page sign-in panel from overlapping content
(#5132)
### What changes were proposed in this PR?
On the logged-out About page, the sign-in panel was rendered inside the
`.content` column with `position: absolute; top: 130px; right: 0;`.
Because the absolutely-positioned panel was removed from layout flow,
the surrounding `<p>` description and `<h2>` headings had no right-side
reserved space and flowed underneath the panel, leaving the right edge
of the text visually overlapped (see #5126 screenshot).
This PR restructures the page so the title + description still span the
full content width, and adds a sub-row that places the feature-list
column side-by-side with the sign-in column:
- Drop the unused outer `nz-row` on `.about-page-container` and the
unused `nz-col` on `.content` (they only ever held one child, so the
flex grid was inert).
- Introduce a `.features-row` inside `.content` that pairs the
feature-list (`nzFlex="auto"`) with a 350px sign-in column. The
workflow-GUI screenshot and Learn More section stay below at full width.
- Replace `position: absolute; top: 130px; right: 0; max-width: 350px;
width: 100%;` on `.login-container` with a normal-flow `margin-top:
10px;` so its top aligns with the feature-list `<h2>`.
- Loosen `.content > h2` to `.content h2` so the (now-nested) feature
heading still gets the 10px top margin.
On viewports narrow enough that 350px + auto cannot fit side-by-side,
`nz-row`'s default `flex-wrap: wrap` lets the sign-in column drop below
the feature list rather than overlap it.
## before change
<img width="1086" height="420" alt="Image"
src="https://github.com/user-attachments/assets/cfe8e0c0-da3a-4c88-83a7-684d15ec0896";
/>
## demo (after change)
https://github.com/user-attachments/assets/25878ca9-0b05-47ed-9e37-6d54d849c4ea
### Any related issues, documentation, discussions?
Closes #5126.
### How was this PR tested?
CSS / template-only layout change. No automated test added — a unit test
would only assert that `*ngIf` toggles a DOM node, which is a tautology
of the template. Verified locally on the logged-out About page: title +
description span the full width, feature-list and sign-in panel sit side
by side, content no longer slides under the panel, and dragging the
window narrow makes the panel wrap below instead of overflowing.
### 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) <[email protected]>
---
.../app/hub/component/about/about.component.html | 58 ++++++++++++----------
.../app/hub/component/about/about.component.scss | 8 +--
2 files changed, 33 insertions(+), 33 deletions(-)
diff --git a/frontend/src/app/hub/component/about/about.component.html
b/frontend/src/app/hub/component/about/about.component.html
index 0c75a30d13..44e26111bc 100644
--- a/frontend/src/app/hub/component/about/about.component.html
+++ b/frontend/src/app/hub/component/about/about.component.html
@@ -17,15 +17,8 @@
under the License.
-->
-<div
- class="about-page-container"
- nz-row
- nzJustify="space-around"
- nzAlign="middle">
- <div
- nz-col
- nzFlex="auto"
- class="content">
+<div class="about-page-container">
+ <div class="content">
<h1 class="about-title">About Texera</h1>
<p>
@@ -37,16 +30,35 @@
of large datasets.
</p>
- <h2 class="content-title">The platform has the following key features:</h2>
- <ul class="text-content">
- <li>Natural-language data science through AI agents</li>
- <li>Intuitive GUI-based workflows for data science</li>
- <li>Real-time collaboration for workflow editing and execution</li>
- <li>Parallel backend engine for scalable big-data processing</li>
- <li>Language-agnostic workflow runtime, native support for Python and
Java</li>
- <li>Separation of compute and storage for flexible cloud deployment</li>
- <li>Runtime debugging and interactive workflow execution</li>
- </ul>
+ <div
+ nz-row
+ nzAlign="top"
+ nzGutter="24"
+ class="features-row">
+ <div
+ nz-col
+ nzFlex="auto">
+ <h2 class="content-title">The platform has the following key
features:</h2>
+ <ul class="text-content">
+ <li>Natural-language data science through AI agents</li>
+ <li>Intuitive GUI-based workflows for data science</li>
+ <li>Real-time collaboration for workflow editing and execution</li>
+ <li>Parallel backend engine for scalable big-data processing</li>
+ <li>Language-agnostic workflow runtime, native support for Python
and Java</li>
+ <li>Separation of compute and storage for flexible cloud
deployment</li>
+ <li>Runtime debugging and interactive workflow execution</li>
+ </ul>
+ </div>
+ <ng-container *ngIf="(isLogin$ | async) === false">
+ <div
+ *ngIf="this.config.env.localLogin"
+ nz-col
+ nzFlex="350px">
+ <texera-local-login class="login-container"></texera-local-login>
+ </div>
+ </ng-container>
+ </div>
+
<img
class="workflow-gui-screenshot"
src="../../../../../assets/workflow_gui.png"
@@ -58,13 +70,5 @@
<a href="https://github.com/apache/texera";>source code</a> of the
platform is available on GitHub.
</p>
</div>
- <ng-container *ngIf="(isLogin$ | async) === false as isLogin">
- <texera-local-login
- *ngIf="this.config.env.localLogin"
- class="login-container"
- nz-col
- nzFlex="300px">
- </texera-local-login>
- </ng-container>
</div>
</div>
diff --git a/frontend/src/app/hub/component/about/about.component.scss
b/frontend/src/app/hub/component/about/about.component.scss
index 05305cc527..34a90b4276 100644
--- a/frontend/src/app/hub/component/about/about.component.scss
+++ b/frontend/src/app/hub/component/about/about.component.scss
@@ -36,7 +36,7 @@
margin: 0;
}
-.content > h2 {
+.content h2 {
font-size: 28px;
font-weight: bold;
margin-top: 10px;
@@ -61,11 +61,7 @@
}
.login-container {
- position: absolute;
- top: 130px;
- right: 0;
- max-width: 350px;
- width: 100%;
+ margin-top: 10px;
background: white;
}
