webui: improve rule table css

- category radio line has line-height large enough to contain
  undo button -> content doesn't move several pixels on change
- remove vertical padding from btns in table headers to maintain
  about the same height
- remove invisible border from link buttons to have the same height
  for disabled and enabled button

Reviewed-By: Endi Sukma Dewata <[email protected]>

3 files changed, 14 insertions, 3 deletions

diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index e02e282e3..770b98391 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -285,8 +285,10 @@ textarea.certificate {
 /* ---- Table ---- */
 
 /* Used in association tables */
-th div[name="buttons"] .action-button {
-    margin: 0 0 0 6px;
+th div[name="buttons"] .btn-link {
+    padding-top: 0;
+    padding-bottom: 0;
+    border: 0;
 }
 
 table.scrollable thead {
diff --git a/install/ui/less/widgets.less b/install/ui/less/widgets.less
index 2c9818b83..ff6d7ba3f 100644
--- a/install/ui/less/widgets.less
+++ b/install/ui/less/widgets.less
@@ -70,3 +70,11 @@
     max-height: 0;
     padding: 0;
 }
+
+// Rule Details Widget
+
+.rule-enable-radio {
+    // make some space for 'Undo' button
+    line-height: @input-height-base + 2;
+    margin-bottom: 2px;
+}
diff --git a/install/ui/src/freeipa/rule.js b/install/ui/src/freeipa/rule.js
index 11a8e8201..8a2b01963 100644
--- a/install/ui/src/freeipa/rule.js
+++ b/install/ui/src/freeipa/rule.js
@@ -46,7 +46,8 @@ IPA.rule_details_widget = function(spec) {
         that.enable_radio = IPA.rule_radio_widget({
             name: that.radio_name,
             options: that.options,
-            entity: that.entity
+            entity: that.entity,
+            css_class: 'rule-enable-radio'
         });
 
         that.widgets.add_widget(that.enable_radio);