fixes weird layout and extra space after card on larger screen-width

app/assets/stylesheets/provider/_tables.scss

@@ -48,14 +48,6 @@ table:not(.pf-c-table) button.action {
   display: inline-block;
 }
 
-table.list {
-  td,
-  th {
-    border-bottom: $border-width solid $border-color;
-    font-weight: $font-weight-normal;
-  }
-}
-
 .u-fiveEqualColumns {
   td,
   th {
@@ -71,6 +63,11 @@ table.list {
 }
 
 table.list {
+  td,
+  th {
+    border-bottom: $border-width solid $border-color;
+    font-weight: $font-weight-normal;
+  }
 
   .feature {
     td,
@@ -85,16 +82,6 @@ table.list {
     }
   }
 
-  td,
-  th {
-    width: 40%;
-
-    &:last-child {
-      width: 60%;
-    }
-  }
-
-
   .action:last-child,
   input[type='submit']:last-child {
     clear: both;
@@ -103,6 +90,22 @@ table.list {
     line-height: $line-height-base;
     margin: 0 line-height-times(-1/2) 0 0;
   }
+
+  border-collapse: collapse;
+  border-color: transparent;
+  margin-bottom: 0;
+  margin-top: 0;
+  width: 100%;
+
+  th {
+    border-bottom: $border-width solid $border-color;
+    padding-right: line-height-times(1/2);
+    text-align: left;
+  }
+
+  &.list-checkmarks tr th {
+    word-break: break-word;
+  }
 }
 
 table.mini {
@@ -119,14 +122,6 @@ table.mini, table#configs {
 
 // --- components/tables.css ---
 
-table.list {
-  border-collapse: collapse;
-  border-color: transparent;
-  margin-bottom: 0;
-  margin-top: 0;
-  width: 100%;
-}
-
 td.right {
   text-align: right;
 }
@@ -152,12 +147,6 @@ table.horizontal th {
   border-bottom: $border-width solid $border-color;
 }
 
-table.list th {
-  border-bottom: $border-width solid $border-color;
-  padding-right: line-height-times(1/2);
-  text-align: left;
-}
-
 table.inverted th {
   font-weight: $font-weight-normal;
 }
@@ -202,10 +191,6 @@ td.thhead h3 {
   text-align: right;
 }
 
-table.list.list-checkmarks tr th {
-  word-break: break-word;
-}
-
 // Overrides
 table#mapping_rules .actions a.action.add {
   margin: line-height-times(-1/4) line-height-times(1 / 2);

app/views/buyers/accounts/show.html.slim

@@ -20,9 +20,7 @@ div class="pf-l-grid pf-m-gutter pf-m-all-6-col"
 
       - if can?(:update, :provider_plans) && can?(:update, @account.bought_cinstance.service)
         div class="pf-l-flex__item"
-          div class="pf-c-card"
-            div class="pf-c-card__body"
-              = render 'master/providers/plans/widget', provider: @account
+          = render 'master/providers/plans/widget', provider: @account
 
       - if can?(:manage, :finance)
         div class="pf-l-flex__item"

app/views/master/providers/plans/_widget.html.slim

@@ -1,32 +1,35 @@
-div id="provider-change-plan"
-  - app = provider.bought_cinstance
-  - plans = app.available_application_plans
+div class="pf-c-card"
+  div class="pf-c-card__body"
+    div id="provider-change-plan"
+      - app = provider.bought_cinstance
+      - plans = app.available_application_plans
 
-  p #{provider.name} is currently on plan <b>#{ app.plan.name  }</b> with these settings:
+      p #{provider.name} is currently on plan <b>#{ app.plan.name  }</b> with these settings:
 
-  table.list
-    - provider.available_switches.each do |switch|
-      tr
-        td
-          b => t(:name, scope: [:switches, switch.name])
+      table.list
+        - provider.available_switches.each do |switch|
+          tr
+            td
+              b => t(:name, scope: [:switches, switch.name])
 
-          - if (description = t(:internal, scope: [:switches, switch.name], default: '').presence)
-            | (#{description})
+              - if (description = t(:internal, scope: [:switches, switch.name], default: '').presence)
+                | (#{description})
 
-        td
-          => switch.status.capitalize
-          - if switch.denied?
-            = fancy_button_to 'enable', master_provider_switch_path(provider, switch.name), method: :put, data: { confirm: 'Really?', disable_with: true }
-  br
-  = form_for app, builder: Fields::PatternflyFormBuilder,
-                       url: edit_master_provider_plan_path(provider),
-                       remote: true,
-                       method: :get,
-                       html: { class: 'pf-c-form' } do |form|
-    = form.input :plan, as: :patternfly_select,
-                        collection: options_from_collection_for_select(plans, :id, :name),
-                        label: 'Change plan',
-                        required: false,
-                        include_blank: false
-    = form.actions do
-      = form.commit_button 'Change plan'
+            td
+              => switch.status.capitalize
+            td
+              - if switch.denied?
+                = fancy_button_to 'enable', master_provider_switch_path(provider, switch.name), method: :put, data: { confirm: 'Really?', disable_with: true }
+  div class="pf-c-card__body"
+    = form_for app, builder: Fields::PatternflyFormBuilder,
+                    url: edit_master_provider_plan_path(provider),
+                    remote: true,
+                    method: :get,
+                    html: { class: 'pf-c-form' } do |form|
+      = form.input :plan, as: :patternfly_select,
+                          collection: options_from_collection_for_select(plans, :id, :name),
+                          label: 'Change plan',
+                          required: false,
+                          include_blank: false
+      = form.actions do
+        = form.commit_button 'Change plan'

features/step_definitions/buyers/accounts/account_overview_steps.rb

@@ -77,7 +77,7 @@
 Then "{string} can be enabled" do |switch|
   within_plan_settings_card do
     accept_confirm do
-      find('td', text: switch).sibling('td', text: 'Denied')
+      find('td', text: switch).sibling('td:last-of-type')
                               .click_button('enable')
     end
   end