fixed layout of tabs in new topic view

css/base.css

@@ -1655,42 +1655,39 @@ img.image-preview::before {
 /* BEGIN Tabs */
 
 ul.tabbar {
-  flex-shrink: 0;
+  display: flex;
   flex-grow: 0;
-  background: #eeeeee;
+  flex-shrink: 0;
+  background: #eee;
   list-style:none;
-  margin:0;
+  margin: 0;
-  width:100%;
+  width: 100%;
-  overflow:hidden;
+  overflow: hidden;
-  padding:0;
+  padding: 0;
-  padding-left:1rem;
+  padding-left: 1rem;
 }
 
 ul.tabbar > li {
-  float: left;
-}
-
-ul.tabbar > li > a {
   position: relative;
-  padding-top: 0.75rem;
+  height: 2.4rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  text-align: center;
-  line-height: 2rem;
-  font-weight: 400;
-  font-size: 1.3rem;
-  font-variant: small-caps;
-  text-decoration: none;
-  color: rgba(33,150,243,0.6);
-  overflow: hidden;
   box-shadow: inset 0 -2px 2.5px -1px rgba(0,0,0,0.25);
 }
 
-ul.tabbar li.active > a {
+ul.tabbar li.active {
-  color: #2196f3;
+  background: #fff;
 }
 
-ul.tabbar li.active > a:after {
+ul.tabbar li:after {
+  height: 0.10rem;
+  width: 100%;
+  content: "";
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  background: #ccc;
+}
+
+ul.tabbar li.active:after {
   height: 0.15rem;
   content: "";
   bottom: 0;
@@ -1710,6 +1707,25 @@ ul.tabbar li.active > a:after {
     width: 100%;
   }
 }
+
+ul.tabbar > li > a {
+  position: relative;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  text-align: center;
+  line-height: 2.4rem;
+  font-weight: 400;
+  font-size: 1.3rem;
+  font-variant: small-caps;
+  text-decoration: none;
+  color: rgba(33,150,243,0.6);
+  overflow: hidden;
+}
+
+ul.tabbar li.active > a {
+  color: #2196f3;
+}
+
 /* END Tabs */
 
 /* Miscellaneous */