[SPARK-55810][UI] Fix missing spacing between table and pagination controls in Jobs and Stages page

[XdithyX]

What changes were proposed in this pull request?

This PR fixes a UI regression in the Spark Web UI (Jobs and Stages pages) where spacing between the data table and the pagination controls ("Page", "Jump to", "Show items") was missing (SPARK-55810).

The issue was introduced during the Bootstrap upgrade in #54552, which caused the pagination controls to appear visually attached to the table. This change restores appropriate spacing between these elements to improve layout clarity and consistency.

Why are the changes needed?

Without proper spacing, the table and pagination controls appear cramped and visually misaligned, which negatively impacts readability and overall user experience in the Spark Web UI.

This is a regression caused by the Bootstrap upgrade and should be fixed to maintain UI consistency.

Does this PR introduce any user-facing change?

Yes.

It improves the visual layout of the Jobs and Stages pages in the Spark Web UI by restoring proper spacing between the table and pagination controls.

How was this patch tested?

1. Built Spark locally and ran spark-shell
2. Opened the Spark Web UI and navigated to the "Jobs" and "Stages" tabs
3. Verified that spacing between the table and pagination controls is correctly applied
4. Compared behavior before and after the fix to confirm the issue is resolved

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

No.

Screenshots

Stages page before the fix	Stages page after the fix

Jobs page before the fix	Jobs page after the fix

[XdithyX]

@dongjoon-hyun @yaooqinn Can you please take a look? Thanks!

[sarutak]

Hi @XdithyX, could you enable GA in your forked repository?
Also, could you put screenshots for Jobs page too?

[sarutak]

Adding mb-3 only to the left inner child breaks symmetry inside the flex container. The left child gains a 1rem bottom margin, but the right child (the Jump-to form) does not, so the two children's bottom edges no longer align under align-items-center. Also, since pageNavigation() is rendered both above and below the table, the same mb-3 gets applied to the bottom nav as well, adding unnecessary spacing there.

Suggested fix: apply the margin to the outer flex container instead:

-    <div class="d-flex justify-content-between align-items-center">
-      <div class="d-flex align-items-center mb-3">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+      <div class="d-flex align-items-center">
         <span class="pe-1">Page: </span>
         <ul class="pagination mb-0">

[XdithyX]

@sarutak Thanks for pointing this out! You're right, the margin should be applied to the outer flex container to keep alignment consistent.
I’ve updated the change accordingly. The earlier version mistakenly applied mb-3 to the inner container.
Also, I have enabled github actions on my fork, CI is currently running.
Added screenshots for Jobs page as well.

Thanks!

[XdithyX]

@sarutak CI is now green. Please let me know if anything else is needed.

[sarutak]

Hi @XdithyX, the latest change LGTM.
Could you put a screenshot of "Jobs page before the fix" before I merge this?

[XdithyX]

Hi @sarutak Added the screenshots for jobs page before the fix.
Thanks!

[sarutak]

Merged to master, branch-4.x and branch-4.2. Thank you @XdithyX !

[sarutak]

@XdithyX Could you tell me your JIRA account, or please create it if you don't have.

[XdithyX]

@sarutak adithyaajith11 is my JIRA username.

[sarutak]

Thank you, @XdithyX. Have set the assignee field to you.
https://issues.apache.org/jira/browse/SPARK-55810