From d53449133c0c99f5898a8b68b9ffded2d41955cb Mon Sep 17 00:00:00 2001
From: retoor <retoor@molodetz.nl>
Date: Fri, 5 Jun 2026 18:18:11 +0200
Subject: [PATCH] Update

---
 devplacepy/static/css/admin.css            |  8 ++
 devplacepy/static/css/attachments.css      |  9 ++
 devplacepy/static/css/base.css             | 97 +++++++++++++++++++++-
 devplacepy/static/css/bugs.css             | 21 +++++
 devplacepy/static/css/feed.css             | 40 ++-------
 devplacepy/static/css/gists.css            |  8 ++
 devplacepy/static/css/markdown.css         | 26 +++++-
 devplacepy/static/css/mention.css          |  6 ++
 devplacepy/static/css/messages.css         |  8 ++
 devplacepy/static/css/notifications.css    | 12 +++
 devplacepy/static/css/post.css             | 73 +---------------
 devplacepy/static/css/services.css         |  2 +-
 devplacepy/templates/_comment_form.html    | 17 ++++
 devplacepy/templates/_comment_section.html | 20 +----
 devplacepy/templates/_post_card.html       |  9 +-
 15 files changed, 222 insertions(+), 134 deletions(-)
 create mode 100644 devplacepy/templates/_comment_form.html

diff --git a/devplacepy/static/css/admin.css b/devplacepy/static/css/admin.css
index 1ceeb9d..88454a6 100644
--- a/devplacepy/static/css/admin.css
+++ b/devplacepy/static/css/admin.css
@@ -374,6 +374,14 @@
     }
 }
 
+@media (hover: none) and (pointer: coarse) {
+    .admin-select,
+    .admin-btn-sm,
+    .admin-btn {
+        min-height: 44px;
+    }
+}
+
 @media (max-width: 480px) {
     .admin-toolbar {
         flex-direction: column;
diff --git a/devplacepy/static/css/attachments.css b/devplacepy/static/css/attachments.css
index ca7d375..8d0273a 100644
--- a/devplacepy/static/css/attachments.css
+++ b/devplacepy/static/css/attachments.css
@@ -258,3 +258,12 @@
         height: 72px;
     }
 }
+
+@media (hover: none) and (pointer: coarse) {
+    .attachment-preview .attachment-remove {
+        width: 28px;
+        height: 28px;
+        font-size: 0.875rem;
+        opacity: 1;
+    }
+}
diff --git a/devplacepy/static/css/base.css b/devplacepy/static/css/base.css
index 752122c..e8f4503 100644
--- a/devplacepy/static/css/base.css
+++ b/devplacepy/static/css/base.css
@@ -702,6 +702,80 @@ img {
 .comment-author { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); }
 .comment-author:hover { color: var(--accent); }
 
+.comment-form {
+    display: flex;
+    gap: 0.75rem;
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border);
+    align-items: center;
+}
+
+.comment-form > a {
+    flex-shrink: 0;
+    line-height: 0;
+}
+
+.comment-form .mention-wrapper {
+    flex: 1;
+    min-width: 0;
+    width: auto;
+}
+
+.comment-form textarea {
+    width: 100%;
+    min-height: 44px;
+    max-height: 120px;
+}
+
+.comment-form-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.comment-form-actions button {
+    padding: 0.375rem 0.5rem;
+    font-size: 1rem;
+    line-height: 1;
+    color: var(--text-muted);
+    background: none;
+    border: none;
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: color 0.2s;
+}
+
+.comment-form-actions button:hover {
+    color: var(--text-primary);
+}
+
+button.comment-form-submit {
+    padding: 0.375rem 0.5rem;
+    background: var(--accent);
+    color: #fff;
+    font-weight: 600;
+    font-size: 0.8125rem;
+    line-height: 1.4;
+}
+
+button.comment-form-submit:hover {
+    background: var(--accent-hover);
+}
+
+@media (max-width: 360px) {
+    .comment-form {
+        flex-wrap: wrap;
+    }
+    .comment-form > a {
+        display: none;
+    }
+    .comment-form .mention-wrapper {
+        flex: 1 1 100%;
+    }
+}
+
 .card {
     background: var(--bg-card);
     border: 1px solid var(--border);
@@ -956,10 +1030,27 @@ img {
     .profile-tab,
     .sidebar-link,
     .topnav-link,
-    .topnav-mobile-link {
+    .topnav-mobile-link,
+    .dropdown-item,
+    .btn,
+    .comment-form-submit {
         min-height: 44px;
     }
 
+    .topnav-icon,
+    .emoji-toggle-btn {
+        min-width: 44px;
+        min-height: 44px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .dropdown-item {
+        display: flex;
+        align-items: center;
+    }
+
     .modal-card input,
     .modal-card textarea,
     .modal-card select {
@@ -979,6 +1070,10 @@ img {
     .comment-text {
         font-size: 0.8125rem;
     }
+
+    .grid-2col {
+        grid-template-columns: 1fr;
+    }
 }
 
 .card-link-host {
diff --git a/devplacepy/static/css/bugs.css b/devplacepy/static/css/bugs.css
index f3b4f03..a848709 100644
--- a/devplacepy/static/css/bugs.css
+++ b/devplacepy/static/css/bugs.css
@@ -56,3 +56,24 @@
     font-size: 0.75rem;
     color: var(--text-muted);
 }
+
+@media (max-width: 480px) {
+    .bugs-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+
+    .bugs-header h1 {
+        font-size: 1.25rem;
+    }
+
+    .bug-card {
+        padding: 1rem;
+    }
+
+    .bug-card-header {
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+}
diff --git a/devplacepy/static/css/feed.css b/devplacepy/static/css/feed.css
index afdcd58..12a00a5 100644
--- a/devplacepy/static/css/feed.css
+++ b/devplacepy/static/css/feed.css
@@ -340,33 +340,6 @@
     box-shadow: 0 6px 20px rgba(229, 57, 53, 0.5);
 }
 
-.feed-comment-form {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    margin-top: 0.75rem;
-    padding-top: 0.75rem;
-    border-top: 1px solid var(--border);
-}
-.feed-comment-form input {
-    flex: 1;
-    padding: 0.375rem 0.75rem;
-    font-size: 0.8125rem;
-    min-height: auto;
-}
-.feed-comment-submit {
-    padding: 0.375rem 0.75rem;
-    background: var(--accent);
-    color: #fff;
-    border-radius: var(--radius);
-    font-weight: 600;
-    font-size: 0.8125rem;
-    white-space: nowrap;
-}
-.feed-comment-submit:hover {
-    background: var(--accent-hover);
-}
-
 @media (max-width: 1024px) {
     .feed-layout {
         grid-template-columns: 1fr;
@@ -407,14 +380,6 @@
         margin-right: 0.125rem;
     }
 
-    .feed-comment-form {
-        flex-wrap: wrap;
-    }
-
-    .feed-comment-form input {
-        min-width: 120px;
-    }
-
     .post-card {
         padding: 0.75rem;
     }
@@ -440,6 +405,11 @@
         padding: 0.375rem 0.5rem;
         font-size: 0.75rem;
     }
+
+    .feed-fab {
+        bottom: calc(1rem + env(safe-area-inset-bottom));
+        right: calc(1rem + env(safe-area-inset-right));
+    }
 }
 
 @media (max-width: 360px) {
diff --git a/devplacepy/static/css/gists.css b/devplacepy/static/css/gists.css
index eff5286..1b3398b 100644
--- a/devplacepy/static/css/gists.css
+++ b/devplacepy/static/css/gists.css
@@ -307,4 +307,12 @@
     .gist-detail-title {
         font-size: 1.25rem;
     }
+
+    .CodeMirror {
+        min-height: 200px;
+    }
+
+    .gist-code-block pre {
+        padding: 0.75rem;
+    }
 }
diff --git a/devplacepy/static/css/markdown.css b/devplacepy/static/css/markdown.css
index cde7823..b5175fc 100644
--- a/devplacepy/static/css/markdown.css
+++ b/devplacepy/static/css/markdown.css
@@ -60,10 +60,13 @@
 }
 
 .rendered-content table {
-    width: 100%;
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
     border-collapse: collapse;
     margin: 0.75rem 0;
     font-size: 0.8125rem;
+    -webkit-overflow-scrolling: touch;
 }
 
 .rendered-content th,
@@ -147,3 +150,24 @@
     font-size: 0.75em;
 }
 
+@media (max-width: 480px) {
+    .rendered-content ul,
+    .rendered-content ol {
+        padding-left: 1.125rem;
+    }
+
+    .rendered-content h1 { font-size: 1.125rem; }
+    .rendered-content h2 { font-size: 1.0625rem; }
+    .rendered-content h3 { font-size: 0.9375rem; }
+    .rendered-content h4 { font-size: 0.875rem; }
+
+    .rendered-content blockquote {
+        padding: 0.25rem 0.5rem;
+    }
+
+    .rendered-content pre code {
+        padding: 0.75rem;
+        font-size: 0.75rem;
+    }
+}
+
diff --git a/devplacepy/static/css/mention.css b/devplacepy/static/css/mention.css
index b6b571e..d2d55dd 100644
--- a/devplacepy/static/css/mention.css
+++ b/devplacepy/static/css/mention.css
@@ -40,3 +40,9 @@
     background: var(--accent-light);
     color: var(--accent);
 }
+
+@media (hover: none) and (pointer: coarse) {
+    .mention-dropdown-item {
+        min-height: 44px;
+    }
+}
diff --git a/devplacepy/static/css/messages.css b/devplacepy/static/css/messages.css
index 5821ac1..7e3de81 100644
--- a/devplacepy/static/css/messages.css
+++ b/devplacepy/static/css/messages.css
@@ -141,6 +141,7 @@
     font-size: 0.875rem;
     line-height: 1.5;
     position: relative;
+    overflow-wrap: anywhere;
 }
 
 .message-bubble.mine {
@@ -264,3 +265,10 @@
         justify-content: center;
     }
 }
+
+@media (hover: none) and (pointer: coarse) {
+    .messages-send-btn {
+        width: 44px;
+        height: 44px;
+    }
+}
diff --git a/devplacepy/static/css/notifications.css b/devplacepy/static/css/notifications.css
index 0c1f048..f7875fe 100644
--- a/devplacepy/static/css/notifications.css
+++ b/devplacepy/static/css/notifications.css
@@ -8,6 +8,8 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 0.5rem;
     margin-bottom: 1rem;
 }
 
@@ -98,4 +100,14 @@
     }
 }
 
+@media (hover: none) and (pointer: coarse) {
+    .notification-dismiss {
+        min-width: 44px;
+        min-height: 44px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+
 
diff --git a/devplacepy/static/css/post.css b/devplacepy/static/css/post.css
index 199e4e8..4aeea96 100644
--- a/devplacepy/static/css/post.css
+++ b/devplacepy/static/css/post.css
@@ -77,6 +77,7 @@
     gap: 0.75rem;
     padding: 1rem 0;
     position: relative;
+    margin-left: calc(var(--comment-depth, 0) * 1.5rem);
 }
 
 .comment-replies {
@@ -187,63 +188,6 @@
     background: var(--bg-card-hover);
 }
 
-.comment-form {
-    display: flex;
-    gap: 0.75rem;
-    margin-top: 1rem;
-    padding-top: 1rem;
-    border-top: 1px solid var(--border);
-    align-items: center;
-}
-
-.comment-form > a {
-    flex-shrink: 0;
-    line-height: 0;
-}
-
-.comment-form textarea {
-    flex: 1;
-    min-width: 0;
-    min-height: 44px;
-    max-height: 120px;
-}
-
-.comment-form-actions {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    flex-shrink: 0;
-}
-
-.comment-form-actions button {
-    padding: 0.375rem 0.5rem;
-    font-size: 1rem;
-    line-height: 1;
-    color: var(--text-muted);
-    background: none;
-    border: none;
-    border-radius: var(--radius);
-    cursor: pointer;
-    transition: color 0.2s;
-}
-
-.comment-form-actions button:hover {
-    color: var(--text-primary);
-}
-
-button.comment-form-submit {
-    padding: 0.375rem 0.5rem;
-    background: var(--accent);
-    color: #fff;
-    font-weight: 600;
-    font-size: 0.8125rem;
-    line-height: 1.4;
-}
-
-button.comment-form-submit:hover {
-    background: var(--accent-hover);
-}
-
 .comment-thread-line {
     position: absolute;
     left: 16px;
@@ -273,6 +217,7 @@ button.comment-form-submit:hover {
 
     .comment {
         gap: 0.5rem;
+        margin-left: calc(var(--comment-depth, 0) * 0.5rem);
     }
 
     .comment-votes {
@@ -283,17 +228,3 @@ button.comment-form-submit:hover {
         padding-left: 0.25rem;
     }
 }
-
-@media (max-width: 360px) {
-    .comment-form {
-        flex-wrap: wrap;
-    }
-
-    .comment-form > a {
-        display: none;
-    }
-
-    .comment-form textarea {
-        min-width: 100%;
-    }
-}
diff --git a/devplacepy/static/css/services.css b/devplacepy/static/css/services.css
index 0ac7ff5..9a97105 100644
--- a/devplacepy/static/css/services.css
+++ b/devplacepy/static/css/services.css
@@ -89,7 +89,7 @@
     line-height: 1.5;
     color: var(--text-code, #e0e0e0);
     white-space: pre-wrap;
-    word-break: break-all;
+    overflow-wrap: anywhere;
     max-height: 300px;
     overflow-y: auto;
     margin: 0;
diff --git a/devplacepy/templates/_comment_form.html b/devplacepy/templates/_comment_form.html
new file mode 100644
index 0000000..e674ef5
--- /dev/null
+++ b/devplacepy/templates/_comment_form.html
@@ -0,0 +1,17 @@
+{% if user %}
+<form class="comment-form" method="POST" action="/comments/create">
+    <input type="hidden" name="target_uid" value="{{ _comment_target_uid }}">
+    <input type="hidden" name="target_type" value="{{ _comment_target_type }}">
+    <a href="/profile/{{ user['username'] }}">
+    <img src="{{ avatar_url('multiavatar', user['username'], 32) }}" class="avatar-img avatar-sm" alt="{{ user['username'] }}" loading="lazy">
+    </a>
+    <textarea name="content" placeholder="Your opinion goes here..." required maxlength="1000" class="emoji-picker-target" data-mention></textarea>
+    <div class="comment-form-actions">
+        <div class="attachment-upload-container" data-attachment-upload
+             data-max-size="{{ max_upload_size_mb() }}"
+             data-max-files="{{ max_attachments_per_resource() }}"
+             data-allowed-types="{{ allowed_file_types() }}"></div>
+        <button type="submit" class="comment-form-submit"><span class="icon">&#x1F4E4;</span> Post</button>
+    </div>
+</form>
+{% endif %}
diff --git a/devplacepy/templates/_comment_section.html b/devplacepy/templates/_comment_section.html
index ec82627..74f2826 100644
--- a/devplacepy/templates/_comment_section.html
+++ b/devplacepy/templates/_comment_section.html
@@ -2,7 +2,7 @@
     <h3>Comments</h3>
 
     {% macro render_comment(item, depth=0) %}
-    <div class="comment" style="margin-left: {{ depth * 1.5 }}rem;" data-depth="{{ depth }}">
+    <div class="comment" style="--comment-depth: {{ depth }};" data-depth="{{ depth }}">
         <div class="comment-votes">
             <form method="POST" action="/votes/comment/{{ item.comment['uid'] }}">
                 <input type="hidden" name="value" value="1">
@@ -54,21 +54,5 @@
     <p class="no-comments-msg">No comments yet. Start the discussion.</p>
     {% endfor %}
 
-    {% if user %}
-    <form class="comment-form" method="POST" action="/comments/create">
-        <input type="hidden" name="target_uid" value="{{ target_uid }}">
-        <input type="hidden" name="target_type" value="{{ target_type }}">
-        <a href="/profile/{{ user['username'] }}">
-        <img src="{{ avatar_url('multiavatar', user['username'], 32) }}" class="avatar-img avatar-sm" alt="{{ user['username'] }}" loading="lazy">
-        </a>
-        <textarea name="content" placeholder="Your opinion goes here..." required maxlength="1000" class="emoji-picker-target" data-mention></textarea>
-        <div class="comment-form-actions">
-            <div class="attachment-upload-container" data-attachment-upload
-                 data-max-size="{{ max_upload_size_mb() }}"
-                 data-max-files="{{ max_attachments_per_resource() }}"
-                 data-allowed-types="{{ allowed_file_types() }}"></div>
-            <button type="submit" class="comment-form-submit"><span class="icon">&#x1F4E4;</span> Post</button>
-        </div>
-    </form>
-    {% endif %}
+    {% set _comment_target_uid = target_uid %}{% set _comment_target_type = target_type %}{% include "_comment_form.html" %}
 </section>
diff --git a/devplacepy/templates/_post_card.html b/devplacepy/templates/_post_card.html
index 34b2a21..e8e6307 100644
--- a/devplacepy/templates/_post_card.html
+++ b/devplacepy/templates/_post_card.html
@@ -31,12 +31,7 @@
         {% endif %}
     </div>
 
-    {% if _show_comment_form and user %}
-    <form class="feed-comment-form" method="POST" action="/comments/create">
-        <input type="hidden" name="post_uid" value="{{ item.post['uid'] }}">
-        <img src="{{ avatar_url('multiavatar', user['username'], 24) }}" class="avatar-img avatar-24" alt="" loading="lazy">
-        <input type="text" name="content" placeholder="Your opinion goes here..." maxlength="1000" autocomplete="off" data-mention>
-        <button type="submit" class="feed-comment-submit">Post</button>
-    </form>
+    {% if _show_comment_form %}
+    {% set _comment_target_uid = item.post['uid'] %}{% set _comment_target_type = "post" %}{% include "_comment_form.html" %}
     {% endif %}
 </article>