Fix tests

public/css/nimforum.scss

@@ -51,6 +51,7 @@ $logo-height: $navbar-height - 20px;
   // Unfortunately we must colour the controls in the navbar manually.
   .search-input {
     @extend .form-input;
+    min-width: 120px;
     border-color: $navbar-border-color-dark;
   }
 
@@ -128,6 +129,9 @@ $logo-height: $navbar-height - 20px;
 }
 
 .category-status {
+  font-size: small;
+  font-weight: bold;
+
   .topic-count {
     margin-left: 5px;
     opacity: 0.7;
@@ -258,7 +262,7 @@ $threads-meta-color: #545d70;
 .category-color {
   width: 0;
   height: 0;
-  border: 0.3rem solid $default-category-color;
+  border: 0.25rem solid $default-category-color;
   display: inline-block;
   margin-right: 5px;
 }
@@ -297,6 +301,10 @@ $threads-meta-color: #545d70;
   }
 }
 
+.thread-replies, .thread-time, .thread-users, .views-text, .centered-header {
+  text-align: center;
+}
+
 .thread-time {
   color: $threads-meta-color;
 

src/frontend/category.nim

@@ -36,7 +36,7 @@ when defined(js):
           tdiv(class="category-color",
                style=style(
                  (StyleAttr.border,
-                  kstring"0.3rem solid #" & category.color)
+                  kstring"0.25rem solid #" & category.color)
           ))
           span(class="category-name"):
             text category.name

src/frontend/threadlist.nim

@@ -74,7 +74,7 @@ when defined(js):
     return true
 
   proc genUserAvatars(users: seq[User]): VNode =
-    result = buildHtml(td):
+    result = buildHtml(td(class="thread-users")):
       for user in users:
         render(user, "avatar avatar-sm", showStatus=true)
         text " "
@@ -114,14 +114,13 @@ when defined(js):
           if thread.isSolved:
             italic(class="fas fa-check-square fa-xs",
                    title="Thread has a solution")
-          a(href=makeUri("/t/" & $thread.id),
-            onClick=anchorCB):
+          a(href=makeUri("/t/" & $thread.id), onClick=anchorCB):
             text thread.topic
-        td(class=class({"d-none": not displayCategory})):
-          render(thread.category)
+          tdiv(class=class({"d-none": not displayCategory})):
+            render(thread.category)
         genUserAvatars(thread.users)
-        td(): text $thread.replies
-        td(class=class({
+        td(class="thread-replies"): text $thread.replies
+        td(class="hide-sm" & class({
             "views-text": thread.views < 999,
             "popular-text": thread.views > 999 and thread.views < 5000,
             "super-popular-text": thread.views > 5000
@@ -209,12 +208,10 @@ when defined(js):
           thead():
             tr:
               th(text "Topic")
-              th(class=class({"d-none": not displayCategory})):
-                text "Category"
-              th(style=style((StyleAttr.width, kstring"8rem"))): text "Users"
-              th(text "Replies")
-              th(text "Views")
-              th(text "Activity")
+              th(class="centered-header"): text "Users"
+              th(class="centered-header"): text "Replies"
+              th(class="hide-sm centered-header"): text "Views"
+              th(class="centered-header"): text "Activity"
           tbody():
             for i in 0 ..< list.threads.len:
               let thread = list.threads[i]

tests/browsertests/categories.nim

@@ -113,18 +113,18 @@ proc categoriesUserTests(session: Session, baseUrl: string) =
         ensureExists "#categories-list"
 
         click "#category-default"
-        checkText "#threads-list .thread-title", "Post 3"
+        checkText "#threads-list .thread-title a", "Post 3"
         for element in session.waitForElements("#threads-list .category-name"):
           # Have to user "innerText" because elements are hidden on this page
           assert element.getProperty("innerText") == "Default"
 
         selectCategory "announcements"
-        checkText "#threads-list .thread-title", "Post 2"
+        checkText "#threads-list .thread-title a", "Post 2"
         for element in session.waitForElements("#threads-list .category-name"):
           assert element.getProperty("innerText") == "Announcements"
 
         selectCategory "fun"
-        checkText "#threads-list .thread-title", "Post 1"
+        checkText "#threads-list .thread-title a", "Post 1"
         for element in session.waitForElements("#threads-list .category-name"):
           assert element.getProperty("innerText") == "Fun"