[update]

kyokusui/templates/base.html

@@ -77,7 +77,7 @@
 </nav>
 <div class='container-fluid' style='height:calc(100vh - 56px)'>
     <div class='row'>
-        <nav class='sidebar col-md-3 mt-4'>
+        <nav class='sidebar col-md-3 col-lg-2 mt-4'>
             {% if permission('create_board', request.user) %}
             <button class='btn btn-primary' data-bs-toggle='modal' data-bs-target='#board_form'>板を立てる</button>
             {% endif %}

kyokusui/templates/home.html

@@ -4,13 +4,15 @@
 <div class='container'>
     <div class='d-flex justify-content-between'>
         <h2>新着スレッド</h2>
-        <a class='btn btn-primary' href='{{ url('/settings') }}'>設定</a>
+        <div>
+            <a class='btn btn-primary' href='{{ url('/settings') }}'>設定</a>
+        </div>
     </div>
     <div class='list-group mt-4'>
         {% for thread in threads|selectattr('closed', 'false') %}
         <a href='{{ url('/' + thread.board._id + '/' + thread._id) }}' class='list-group-item list-group-item-action'>
             <div class='d-flex w-100 justify-content-between'>
-                <div>
+                <div class='mb-2'>
                     <h5 class='mb-2'>
                         {{ thread.title }}
                     </h5>

kyokusui/templates/thread.html

@@ -5,21 +5,21 @@
     <div id='messages'>
         <header class='card mb-3'>
             <div class='card-body'>
-                <h2 class='card-title'>{{ thread.title }}</h2>
+                <h2 class='card-title mb-4'>{{ thread.title }}</h2>
                 {{ lists.userItem(request.user, small=True) }}
                 <div class='card-text d-flex justify-content-end'><small class='text-muted'>{{ thread.created.strftime('%Y-%m-%d %H:%M:%S') }}</small></div>
             </div>
         </header>
         {% for res in thread.res|sort(attribute='datetime') %}
         <div class='card mb-3' id="{{loop.index}}">
             <div class='card-body'>
-                <div class='d-flex justify-content-between'>
-                    <div class='card-title d-flex align-items-center'>
-                        <div class='me-2'><strong>#{{loop.index}}</strong></div>
-                        {{ lists.userItem(res.user, small=True) }}
-                    </div>
+                <div class='mb-2 d-flex justify-content-between'>
+                    <span class='badge bg-secondary'>#{{loop.index}}</span>
                     <div class='card-text'><small class='text-muted'>{{ res.datetime.strftime('%Y-%m-%d %H:%M:%S') }}</small></div>
                 </div>
+                <div class='mb-3'>
+                    {{ lists.userItem(res.user, small=True) }}
+                </div>
                 {{ res.parsed_data.message|hiroyuki|markdown }}
                 <div class='image-list'>
                     {% for image in res.parsed_data.images %}