[Minor] Fix padding on home page

[prabhjyotsingh]

This is a minor CSS to add padding on the table and paginator. It does not make or break anything but makes this page looks slightly different from others.
I've added before/after below for reviewers.

Let me know if this requires any more changes.

Before:

After:

[boring-cyborg]

Congratulations on your first Pull Request and welcome to the Apache Airflow community! If you have any issues or are unsure about any anything please check our Contribution Guide (https://github.com/apache/airflow/blob/main/CONTRIBUTING.rst)
Here are some useful points:

• Pay attention to the quality of your code (flake8, mypy and type annotations). Our pre-commits will help you with that.
• In case of a new feature add useful documentation (in docstrings or in docs/ directory). Adding a new operator? Check this short guide Consider adding an example DAG that shows how users should use it.
• Consider using Breeze environment for testing locally, it’s a heavy docker but it ships with a working Airflow and a lot of integrations.
• Be patient and persistent. It might take some time to get a review or get the final approval from Committers.
• Please follow ASF Code of Conduct for all communication including (but not limited to) comments on Pull Requests, Mailing list and Slack.
• Be sure to read the Airflow Coding style.
  Apache Airflow is a community-driven project and together we are making it better 🚀.
  In case of doubts contact the developers at:
  Mailing List: [email protected]
  Slack: https://s.apache.org/airflow-slack

[prabhjyotsingh]

CI failed for "Quarantined tests" looks unrelated.

[ryanahamilton]

The table intentionally does not have extra padding given its extra-wide contents. The actual issue here is that the pagination buttons and "Showing 1-2…" label aren't supposed to be within the gray box, they are supposed to be below/outside of it. Their current positions actually appear correct, they just shouldn't have the gray background. Want to take a stab at resolving?

[prabhjyotsingh]

@ryanahamilton Sure, which one looks better?

Option-1:

Option-2:

[bbovenzi]

I think option-2 is more consistent. I would just make sure that any dropdowns and tooltips don't get cut off.

[ryanahamilton]

Yeah, I think #1 is how it has been, but I agree with @bbovenzi that #2 is probably the more consistent presentation.

[prabhjyotsingh]

Sure hopefully I didn't break anything.

[bbovenzi]

Could you also check all hover/dropdowns on the last row of a table?

[prabhjyotsingh]

Nothing new looks broken 🤞. "Lint Helm Chart" failure looks unrelated.

[bbovenzi]

The horizontal scroll of the table isn't working. I think all you need to do is add overflow: scroll to .dags-table-wrap

[prabhjyotsingh]

@bbovenzi I see, there are a lot of things happening in there. Sorry, about not being careful. Let me try this on a couple of different browsers with different resolutions.

[prabhjyotsingh]

Added some padding, should take care of all the cases.

[bbovenzi]

Looking good now. Great work!

[prabhjyotsingh]

Thank you @bbovenzi for mentoring me on this.

[ryanahamilton]

Just a small nit regarding class naming, but otherwise LGTM.

[ryanahamilton]

Good catch!

[ryanahamilton]

Nice work. Always fun how these seemingly simple changes open a whole can of worms!

[github-actions]

The PR is likely OK to be merged with just subset of tests for default Python and Database versions without running the full matrix of tests, because it does not modify the core of Airflow. If the committers decide that the full tests matrix is needed, they will add the label 'full tests needed'. Then you should rebase to the latest main or amend the last commit of the PR, and push it with --force-with-lease.

[prabhjyotsingh]

Yes, agreed :)

[boring-cyborg]

Awesome work, congrats on your first merged pull request!