refactor <Tab> to avoid min-height hack

ui/src/components/tab/index.js

@@ -35,8 +35,10 @@ const Tab = ({
       <label className={styles.label} htmlFor={tabId}>
         {title}
       </label>
-      <div className={styles.content}>
+      <div className={styles.panel}>
-        {children}
+        <div className={styles.content}>
+          {children}
+        </div>
       </div>
     </div>
   );

ui/src/components/tab/style.css

@@ -1,43 +1,60 @@
 .tab {
-  float: left;
+  display: inline;
 
   & .label {
-    cursor: pointer;
     background: #F2F2F2;
     border: 1px solid #D8D8D8;
     color: #646464;
+    display: inline-block;
+    font-size: 16px;
+    font-size: 1rem;
+    left: 1px;
+    margin-left: -1px;
+    padding: 10px;
     position: relative;
-    height: 55px;
+    vertical-align: bottom;
-    padding: 14px 25px;
-    margin-right: 5px;
-    z-index: 0;
   }
 
-  & .input[type=radio] {
+  & .input[type="radio"] {
-    visibility: hidden;
+    clip: rect(0 0 0 0);
-    display: none;
+    height: 1px;
+    opacity: 0;
+    position: fixed;
+    width: 1px;
+    z-index: -1;
+  }
+
+  & .panel {
+    display: inline;
+    display: inline-block;
+    overflow: hidden;
+    position: relative;
+    height: 0;
+    width: 0;
   }
 
   & .content {
-    border-color: #D8D8D8;
+    box-sizing: border-box;
-    border-style: solid;
+    display: block;
-    border-width: 1px 0 0 0;
+    background: white;
+    padding: 0 20px;
+    border: 1px solid #D8D8D8;
     background: #FAFAFA;
-    position: absolute;
+    float: left;
-    display: none;
+    font-size: 16px;
-    top: 54px;
+    font-size: 1rem;
-    left: 0;
+    margin-top: -9px;
-    right: 0;
+    width: 100%;
-    bottom: 0;
   }
 
-  & .input[type=radio]:checked ~ .label {
+  & .input[type="radio"]:checked + .label {
-    background: #FAFAFA;
+    background: white;
-    border-bottom: 1px solid #FAFAFA;
+    border-bottom-width: 0;
+    padding-bottom: 11px;
     z-index: 1;
   }
 
-  & .input[type=radio]:checked ~ .label ~ .content {
+  & .input[type="radio"]:checked ~ .panel {
-    display: block;
+    display: inline;
   }
 }

ui/src/components/tabs/style.css

@@ -1,5 +1,9 @@
 .tabs {
-  position: relative;
+  font-size: 0;
-  min-height: 200px; /* This part sucks */
+
-  clear: both;
+  &:after {
+    clear: both;
+    content: '';
+    display: table;
+  }
 }