From 91a12a798c354f9f18c5a936b9027f7540d2d14d Mon Sep 17 00:00:00 2001
From: Prabhjyot <prabhjyotsingh@gmail.com>
Date: Thu, 21 Oct 2021 02:08:13 +0530
Subject: [PATCH] [Minor] Fix padding on home page (#19025)

* [Minor] fix padding on home page

* fix lint

* Move filters and pagination out from dags-table-wrap

* - fix last row of a table
 - col span should be 10 instead of 9

* add bottom padding

* Update airflow/www/static/css/dags.css

Co-authored-by: Ryan Hamilton <ryan@ryanahamilton.com>

Co-authored-by: Ryan Hamilton <ryan@ryanahamilton.com>
---
 airflow/www/static/css/dags.css         |  8 +--
 airflow/www/templates/airflow/dags.html | 68 ++++++++++++-------------
 2 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/airflow/www/static/css/dags.css b/airflow/www/static/css/dags.css
index 6d25949951f10..517a538f3948f 100644
--- a/airflow/www/static/css/dags.css
+++ b/airflow/www/static/css/dags.css
@@ -31,10 +31,12 @@
 .dags-table-body {
   margin: 0 1px;
   overflow-x: auto;
+  padding-bottom: 34px;
+}
 
-  /* This allows small dropdowns to overlap the table element */
-  padding-bottom: 55px;
-  margin-bottom: -55px;
+.no-x-padding {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .dags-table-more {
diff --git a/airflow/www/templates/airflow/dags.html b/airflow/www/templates/airflow/dags.html
index 5d5d1405f73f0..6f98d8ae92bf2 100644
--- a/airflow/www/templates/airflow/dags.html
+++ b/airflow/www/templates/airflow/dags.html
@@ -78,41 +78,41 @@
 {% block content %}
   <h2>{{ page_title }}</h2>
   <div id="main_content">
-    <div class="dags-table-wrap">
-      <div class="row dags-table-header">
-        <div class="col-md-4">
-          <div class="form-group btn-group">
-            <a href="{{ url_for('Airflow.index', status='all', search=request.args.get('search', None), tags=request.args.getlist('tags', None)) }}" class="btn {{'btn-primary' if status_filter == 'all' else 'btn-default'}}" title="Show active and paused DAGs">All <span class="badge">{{ "{:,}".format(status_count_all) }}</span></a>
-            <a href="{{ url_for('Airflow.index', status='active', search=request.args.get('search', None), tags=request.args.getlist('tags', None)) }}" class="btn {{'btn-primary' if status_filter == 'active' else 'btn-default'}}" title="Show only active DAGs">Active <span class="badge">{{ "{:,}".format(status_count_active) }}</span></a>
-            <a href="{{ url_for('Airflow.index', status='paused', search=request.args.get('search', None), tags=request.args.getlist('tags', None)) }}" class="btn {{'btn-primary' if status_filter == 'paused' else 'btn-default'}}" title="Show only paused DAGs">Paused <span class="badge">{{ "{:,}".format(status_count_paused) }}</span></a>
-          </div>
-        </div>
-        <div class="col-sm-6 col-md-3">
-          <form id="tags_form" style="width: 100%; text-align: left;">
-            <div class="form-group search-input" style="width:100%;">
-              <select multiple name="tags" id="tags_filter" class="select2-drop-mask" style="width: 100%;">
-                {% for tag in tags %}
-                  <option value="{{ tag.name }}" {% if tag.selected %}selected{% endif %}>{{ tag.name }}</option>
-                {% endfor %}
-              </select>
-              {% if tags_filter|length > 0 %}
-                <button type="reset" aria-label="Clear all tags" class="btn btn-default btn-sm material-icons search-input__clear-btn">cancel</button>
-              {% endif %}
-            </div>
-          </form>
-        </div>
-        <div class="col-sm-6 col-md-3 col-md-offset-2">
-          <form id="search_form">
-            <div class="form-group search-input" style="width: 100%;">
-              <label for="dag_query" class="sr-only">Search DAGs</label>
-              <input type="search" id="dag_query" class="typeahead form-control search-input__input" data-provide="typeahead" style="width:100%;" value="{{search_query}}" autocomplete="off" placeholder="Search DAGs">
-              {% if search_query %}
-                <button type="reset" aria-label="Clear DAG Search Term" class="btn btn-default btn-sm material-icons search-input__clear-btn">cancel</button>
-              {% endif %}
-            </div>
-          </form>
+    <div class="row dags-table-header">
+      <div class="col-md-4 no-x-padding">
+        <div class="form-group btn-group">
+          <a href="{{ url_for('Airflow.index', status='all', search=request.args.get('search', None), tags=request.args.getlist('tags', None)) }}" class="btn {{'btn-primary' if status_filter == 'all' else 'btn-default'}}" title="Show active and paused DAGs">All <span class="badge">{{ "{:,}".format(status_count_all) }}</span></a>
+          <a href="{{ url_for('Airflow.index', status='active', search=request.args.get('search', None), tags=request.args.getlist('tags', None)) }}" class="btn {{'btn-primary' if status_filter == 'active' else 'btn-default'}}" title="Show only active DAGs">Active <span class="badge">{{ "{:,}".format(status_count_active) }}</span></a>
+          <a href="{{ url_for('Airflow.index', status='paused', search=request.args.get('search', None), tags=request.args.getlist('tags', None)) }}" class="btn {{'btn-primary' if status_filter == 'paused' else 'btn-default'}}" title="Show only paused DAGs">Paused <span class="badge">{{ "{:,}".format(status_count_paused) }}</span></a>
         </div>
       </div>
+      <div class="col-sm-6 col-md-3">
+        <form id="tags_form" style="width: 100%; text-align: left;">
+          <div class="form-group search-input" style="width:100%;">
+            <select multiple name="tags" id="tags_filter" class="select2-drop-mask" style="width: 100%;">
+              {% for tag in tags %}
+                <option value="{{ tag.name }}" {% if tag.selected %}selected{% endif %}>{{ tag.name }}</option>
+              {% endfor %}
+            </select>
+            {% if tags_filter|length > 0 %}
+              <button type="reset" aria-label="Clear all tags" class="btn btn-default btn-sm material-icons search-input__clear-btn">cancel</button>
+            {% endif %}
+          </div>
+        </form>
+      </div>
+      <div class="col-sm-6 col-md-3 col-md-offset-2 no-x-padding">
+        <form id="search_form">
+          <div class="form-group search-input" style="width: 100%;">
+            <label for="dag_query" class="sr-only">Search DAGs</label>
+            <input type="search" id="dag_query" class="typeahead form-control search-input__input" data-provide="typeahead" style="width:100%;" value="{{search_query}}" autocomplete="off" placeholder="Search DAGs">
+            {% if search_query %}
+              <button type="reset" aria-label="Clear DAG Search Term" class="btn btn-default btn-sm material-icons search-input__clear-btn">cancel</button>
+            {% endif %}
+          </div>
+        </form>
+      </div>
+    </div>
+    <div class="dags-table-wrap">
       <div class="dags-table-body">
         <table class="table table-striped table-bordered table-hover">
           <thead>
@@ -141,7 +141,7 @@ <h2>{{ page_title }}</h2>
           </thead>
           <tbody>
             {% if dags|length == 0 %}
-              <tr><td colspan="9">No results</td></tr>
+              <tr><td colspan="10">No results</td></tr>
             {% endif %}
             {% for dag in dags %}
               <tr>