support: Remove relative positioning for form elements.

Prep commit for adding a grid layout for some query response data.

templates/corporate/support/realm_details.html

@@ -40,14 +40,14 @@
     </select>
     <button type="submit" class="support-submit-button">Update</button>
 </form>
-<form method="POST">
+<form method="POST" class="realm-subdomain-form">
     <b>New subdomain</b>:<br />
     {{ csrf_input }}
     <input type="hidden" name="realm_id" value="{{ realm.id }}" />
     <input type="text" name="new_subdomain" required />
     <button type="submit" class="support-submit-button">Update</button>
 </form>
-<form method="POST">
+<form method="POST" class="realm-organization-type-form">
     <b>Org type</b>:<br />
     {{ csrf_input }}
     <input type="hidden" name="realm_id" value="{{ realm.id }}" />
@@ -92,7 +92,7 @@
     <button class="approve-sponsorship-button">
         Approve full sponsorship
     </button>
-    (will email organization owners).
+    (will email organization owners)
 </form>
 {% endif %}
 

templates/corporate/support/remote_server_support.html

@@ -10,8 +10,7 @@
 
 {% block content %}
 <div class="container">
-    <br />
-    <form>
+    <form class="support-search-form">
         <center>
             <input type="text" name="q" class="input-xxlarge search-query" placeholder="hostname or contact email" value="{{ request.GET.get('q', '') }}" autofocus />
             <button type="submit" class="support-search-button">Search</button>

templates/corporate/support/sponsorship_forms_support.html

@@ -10,7 +10,7 @@
 </form>
 
 {% if sponsorship_data.sponsorship_pending %}
-<form method="POST" class="">
+<form method="POST" class="remote-form">
     {{ csrf_input }}
     <input type="hidden" name="{{ remote_type }}" value="{{ remote_id }}" />
     <input type="hidden" name="approve_sponsorship" value="true" />

templates/corporate/support/support.html

@@ -9,8 +9,7 @@
 
 {% block content %}
 <div class="container">
-    <br />
-    <form>
+    <form class="support-search-form">
         <center>
             <input type="text" name="q" class="input-xxlarge search-query" placeholder="full names, emails, string_ids, organization URLs separated by commas" value="{{ request.GET.get('q', '') }}" autofocus />
             <button type="submit" class="support-search-button">Search</button>

web/styles/portico/activity.css

@@ -124,10 +124,9 @@ tr.admin td:first-child {
         color: hsl(0deg 0% 33%);
         border-radius: 4px;
         border: 1px solid hsl(0deg 0% 80%);
-        margin-bottom: 10px;
         cursor: pointer;
         background-color: hsl(0deg 0% 100%);
-        vertical-align: middle;
+        vertical-align: text-bottom;
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
         &:focus {
@@ -143,7 +142,7 @@ tr.admin td:first-child {
         border-radius: 4px;
         border: 1px solid hsl(0deg 0% 80%);
         color: hsl(0deg 0% 33%);
-        margin-bottom: 10px;
+        vertical-align: text-bottom;
         transition:
             border linear 0.2s,
             box-shadow linear 0.2s;
@@ -185,7 +184,7 @@ tr.admin td:first-child {
     line-height: 1.4286;
     text-align: center;
     white-space: nowrap;
-    vertical-align: middle;
+    vertical-align: text-bottom;
     cursor: pointer;
     user-select: none;
     background-image: none;
@@ -212,6 +211,19 @@ tr.admin td:first-child {
     }
 }
 
+.support-search-form {
+    margin: 10px;
+}
+
+.approve-sponsorship-button {
+    vertical-align: middle;
+}
+
+.support-search-button {
+    vertical-align: middle;
+    margin: 10px;
+}
+
 .approve-sponsorship-button,
 .support-search-button,
 .support-submit-button {
@@ -246,6 +258,10 @@ tr.admin td:first-child {
     }
 }
 
+.delete-user-form {
+    margin: 8px 0;
+}
+
 .installation-activity-header {
     text-align: center;
 }
@@ -255,75 +271,38 @@ tr.admin td:first-child {
     padding-bottom: 15px;
 }
 
-.remote-form {
-    margin-bottom: 10px;
-}
-
 .support-realm-icon {
     max-width: 25px;
     position: relative;
+    vertical-align: middle;
     top: -2px;
 }
 
-.support-realm-status-form {
-    position: relative;
-    top: 20px;
-}
-
-.support-discount-form {
-    position: relative;
-    top: -50px;
-}
-
-.support-plan-type-form {
-    position: relative;
-    top: -10px;
-}
-
-.sponsorship-pending-form {
-    position: relative;
-    top: -25px;
-}
-
-.current-plan-details {
-    position: relative;
-    top: -45px;
-}
-
-.approve-sponsorship-form {
-    position: relative;
-    top: -40px;
-}
-
-.billing-modality-form {
-    position: relative;
-    top: -30px;
-}
-
-.downgrade-plan-form {
-    position: relative;
-    top: -75px;
-}
-
-.modify-plan-method-select {
-    width: auto;
+.scrub-realm-form,
+.realm-organization-type-form,
+.realm-subdomain-form,
+.downgrade-plan-form,
+.billing-modality-form,
+.approve-sponsorship-form,
+.current-plan-details,
+.sponsorship-pending-form,
+.support-plan-type-form,
+.support-discount-form,
+.support-realm-status-form,
+.remote-form,
+.current-plan-information {
+    margin-bottom: 10px;
 }
 
 .scrub-realm-form {
-    position: relative;
-    top: -70px;
-}
-
-.support-submit-button {
-    position: relative;
-    top: -3px;
+    padding-bottom: 10px;
 }
 
 .search-query.input-xxlarge {
     width: 530px;
     padding: 4px 14px;
     margin-bottom: 0;
-    border-radius: 15px;
+    border-radius: 8px;
     border: 1px solid hsl(0deg 0% 80%);
     box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
     transition: