ui: 修复一些显示问题

packages/ui-default/components/discussion/comments.page.styl

@@ -29,6 +29,13 @@ $downvote-color = red
     border-top: 0
 
 .dczcomments__reply
+  >.media
+    // FIXME doesn't work on IE 11
+    display: flex
+
+    >.media__body
+      width: calc(100% - (50px + 0.625rem))
+
   &:last-child
     >.media
       padding-bottom: 0
@@ -36,7 +43,7 @@ $downvote-color = red
 .dczcomments__item > .media
   display: flex
   >.media__body
-    max-width: calc(100% - 6.5em);
+    max-width: calc(100% - 6.5em)
 
 .dczcomments__supplementary
   float: left

packages/ui-default/components/problem/tag.page.styl

@@ -4,6 +4,8 @@
   list-style: none !important
   font-size: 0
   word-break: keep-all
+  display: flex
+  flex-wrap: wrap
 
 .problem__tag
   display: inline-block
@@ -13,11 +15,15 @@
   padding: 0 !important
 
 .problem__tag-item
-  padding: rem(0px)
+  padding: 0 10px !important
   margin-left: rem(3px)
   margin-bottom: rem(5px)
+  line-height: 30px !important
   &:hover
     text-decoration: none
+  > span
+    display: flex
+    align-items: center
 
 .problem__tag-link
   display: inline-block

packages/ui-default/package.json

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

packages/ui-default/pages/problem_detail.page.jsx

@@ -108,7 +108,7 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
     await $('#scratchpad')
       .transition(
         { opacity: 1 },
-        { duration: 200, easing: 'easeOutCubic' }
+        { duration: 200, easing: 'easeOutCubic' },
       )
       .promise();
   }
@@ -117,7 +117,7 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
     await $('#scratchpad')
       .transition(
         { opacity: 0 },
-        { duration: 200, easing: 'easeOutCubic' }
+        { duration: 200, easing: 'easeOutCubic' },
       )
       .promise();
   }
@@ -262,7 +262,7 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
   });
   $(document).on('click', '[name="show_tags"]', (ev) => {
     $(ev.currentTarget).hide();
-    $('span.tags').show();
+    $('span.tags').css('display', 'inline-block');
   });
   $('[name="problem-sidebar__download').on('click', handleClickDownloadProblem);
   if (UiContext.pdoc.config?.type === 'objective') loadObjective();

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

@@ -200,8 +200,7 @@ async function handleDownload(ev) {
 }
 
 const page = new NamedPage(['problem_main', 'problem_category'], () => {
-  const doc = document.documentElement;
-  doc.className += ' display-mode';
+  const doc = document.getElementById('listSection');
   buildCategoryFilter();
   parseCategorySelection();
   $('[name="leave-edit-mode"]').on('click', () => {

packages/ui-default/templates/partials/problem_sidebar_normal.html

@@ -101,7 +101,7 @@
   {% include "partials/problem-sidebar-information.html" %}
 </div>
 {% elif page_name != 'contest_detail_problem' %}
-<div class="section side nojs-hide">
+<div class="section side nojs--hide">
   <div class="section__header">
     <h1 class="section__title">{{ _('Statistics') }}</h1>
   </div>

packages/ui-default/templates/problem_main.html

@@ -9,7 +9,7 @@
   }) }}
   <div class="row">
     <div class="medium-9 columns">
-      <div class="section">
+      <div class="section display-mode" id="listSection">
         <div class="section__body no-padding">
           <form method="get" id="searchForm" action="{{ url('problem_main') }}">
             <div class="search">
@@ -26,7 +26,7 @@
     </div>
     <div class="medium-3 columns">
       {% if handler.user.hasPerm(perm.PERM_EDIT_PROBLEM) %}
-        <div class="section side">
+        <div class="section side nojs--hide">
           <ol class="menu">
             <a href="javascript:;" class="menu__link edit-mode-hide" name="enter-edit-mode">
               <span class="icon icon-edit"></span>