ui: fix problem edit&create category display

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.8.33",
+  "version": "4.8.34",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",

packages/ui-default/pages/problem_main.page.styl

@@ -31,78 +31,78 @@
       border-left: 1px solid $table-border-color
 
 
-  .widget--category-filter
+.widget--category-filter
-    &__category
+  &__category
-      margin-bottom: rem(6px)
+    margin-bottom: rem(6px)
 
-      &-tag
+    &-tag
-        display: inline-block
-        padding: rem(5px 6px)
-
-        &:hover
-          color: #FFF
-          background: $primary-color
-          text-decoration: none
-
-        &.selected
-          color: #FFF
-          background: $secondary-color
-
-    &__drop
-      position: relative
-      font-size: rem($font-size-small)
-      width: rem(170px)
-      padding: rem(10px)
-      margin-right: rem(10px)
-      background: $menu-drop-bg-color
-      box-shadow: $menu-drop-shadow
-
-      &:before
-        content: ''
-        display: block
-        position: absolute
-        width: 0
-        height: 0
-        border: rem($menu-drop-triangle-size) solid transparent
-        border-top-color: #FFF
-        border-left-color: #FFF
-        box-shadow: $menu-drop-triangle-shadow
-        transform: rotate(135deg)
-        transform-origin: 0 0
-        pointer-events: none
-        left: 100%
-        top: 50%
-        margin-left: rem(floor($menu-drop-triangle-size * 1.414))
-
-    &__subcategory
-      margin: rem(2px)
       display: inline-block
+      padding: rem(5px 6px)
 
-      &-tag
+      &:hover
-        display: inline-block
+        color: #FFF
-        padding: rem(5px 6px)
+        background: $primary-color
+        text-decoration: none
 
-        &:hover
+      &.selected
-          color: #FFF
+        color: #FFF
-          background: $primary-color
+        background: $secondary-color
-          text-decoration: none
 
-        &.selected
+  &__drop
-          color: #FFF
+    position: relative
-          background: $secondary-color
+    font-size: rem($font-size-small)
-
+    width: rem(170px)
-  .drop-target-attached-right .widget--category-filter__drop
+    padding: rem(10px)
-    margin-right: 0
+    margin-right: rem(10px)
-    margin-left: rem(10px)
+    background: $menu-drop-bg-color
+    box-shadow: $menu-drop-shadow
 
     &:before
-      transform-origin: 100% 0
+      content: ''
-      transform: rotate(-45deg)
+      display: block
-      left: auto
+      position: absolute
-      right: 100%
+      width: 0
-      margin-left: 0
+      height: 0
-      margin-right: 0
+      border: rem($menu-drop-triangle-size) solid transparent
-      margin-top: rem(floor($menu-drop-triangle-size * -1.414))
+      border-top-color: #FFF
+      border-left-color: #FFF
+      box-shadow: $menu-drop-triangle-shadow
+      transform: rotate(135deg)
+      transform-origin: 0 0
+      pointer-events: none
+      left: 100%
+      top: 50%
+      margin-left: rem(floor($menu-drop-triangle-size * 1.414))
+
+  &__subcategory
+    margin: rem(2px)
+    display: inline-block
+
+    &-tag
+      display: inline-block
+      padding: rem(5px 6px)
+
+      &:hover
+        color: #FFF
+        background: $primary-color
+        text-decoration: none
+
+      &.selected
+        color: #FFF
+        background: $secondary-color
+
+.drop-target-attached-right .widget--category-filter__drop
+  margin-right: 0
+  margin-left: rem(10px)
+
+  &:before
+    transform-origin: 100% 0
+    transform: rotate(-45deg)
+    left: auto
+    right: 100%
+    margin-left: 0
+    margin-right: 0
+    margin-top: rem(floor($menu-drop-triangle-size * -1.414))
 
 
 .display-mode .display-mode-hide