More UX tweaks

static/css/style.css

@@ -1002,7 +1002,7 @@ form .post {
 }
 
 .post .summary {
-    margin: 12px 0 4px 0;
+    margin: 12px 0 4px 64px;
     padding: 3px 6px;
     border-radius: 3px;
     background: var(--color-bg-menu);
@@ -1027,6 +1027,10 @@ form .post {
     color: var(--color-text-duller);
 }
 
+.post .content {
+    margin-left: 64px;
+}
+
 .post.mini .content,
 .post.mini .edited {
     margin-left: 0;
@@ -1058,33 +1062,29 @@ form .post {
 
 .post .actions {
     display: flex;
+    position: relative;
     justify-content: space-between;
     padding: 8px 0 0 0;
     align-items: center;
     align-content: center;
-    margin-bottom: -8px;
+    margin: 0 0 -8px 64px;
-}
-
-.post .post-action {
-    padding: 2px 4px;
-    border-radius: 4px;
-    min-width: 60px;
-    text-align: center;
-}
-
-.post .post-action:hover {
-    background-color: var(--color-bg-main);
 }
 
 .post .actions a {
+    padding: 2px 4px;
+    border-radius: 4px;
+    min-width: 60px;
     text-align: center;
     cursor: pointer;
     color: var(--color-text-dull);
 }
 
-.post .actions a.menu {
+.post .actions a:hover {
+    background-color: var(--color-bg-main);
 }
 
+.post .actions a.menu {}
+
 .post .actions menu {
     display: none;
     background-color: var(--color-bg-menu);
@@ -1092,8 +1092,8 @@ form .post {
     padding: 5px 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
     position: absolute;
-    left: -130px;
+    right: 0px;
-    top: -130px;
+    bottom: 35px;
 }
 
 .post .actions menu.enabled {
@@ -1104,7 +1104,7 @@ form .post {
 .post .actions menu a {
     text-align: left;
     display: block;
-    width: 165px;
+    width: 185px;
     font-size: 15px;
 }
 
@@ -1113,10 +1113,6 @@ form .post {
     width: 16px;
 }
 
-.post .actions .dropdown {
-    position: relative;
-}
-
 .post .actions a:hover {
     color: var(--color-text-main);
 }
@@ -1177,7 +1173,7 @@ form .post {
 .mention-banner,
 .follow-banner,
 .like-banner {
-    padding: 3px 0 3px 10px;
+    padding: 0 0 3px 5px;
 }
 
 .boost-banner .emoji,
@@ -1298,7 +1294,7 @@ form .post {
 }
 
 
-@media (max-width: 700px) {
+@media (max-width: 750px) {
     header menu a.identity {
         width: 50px;
         padding: 10px 10px 0 0;
@@ -1339,19 +1335,25 @@ form .post {
         display: none;
     }
 
-    #main-content {
+    .left-column {
-        padding: 0;
+        padding: 8px;
-    }
-
-    #side-navigation,
-    header menu .identity {
-        border-left: 1px solid var(--color-input-border);
     }
 
     .post {
-        margin-bottom: 0;
+        margin-bottom: 15px;
-        border-bottom: 1px solid var(--color-input-border);
     }
+
+}
+
+
+@media (max-width: 550px) {
+
+    .post .content,
+    .post .summary,
+    .post .actions {
+        margin-left: 0;
+    }
+
 }
 
 /* Copy to clipboard action */

templates/activities/_boost.html

@@ -1,4 +1,3 @@
-<span class="post-action">
 {% if post.pk in interactions.boost %}
     <a title="Unboost" class="active" hx-post="{{ post.urls.action_unboost }}" hx-swap="outerHTML">
         <i class="fa-solid fa-retweet"></i> {{ event.boost_count }}
@@ -8,4 +7,3 @@
         <i class="fa-solid fa-retweet"></i> {{ event.boost_count }}
     </a>
 {% endif %}
-</span>

templates/activities/_like.html

@@ -1,4 +1,3 @@
-<span class="post-action">
 {% if post.pk in interactions.like %}
     <a title="Unlike" class="active" hx-post="{{ post.urls.action_unlike }}" hx-swap="outerHTML" role="menuitem">
         <i class="fa-solid fa-star"></i> {{ event.like_count }}
@@ -8,4 +7,3 @@
         <i class="fa-solid fa-star"></i> {{ event.like_count }}
     </a>
 {% endif %}
-</span>

templates/activities/_post.html

@@ -62,9 +62,8 @@
         {% include "activities/_reply.html" %}
         {% include "activities/_like.html" %}
         {% include "activities/_boost.html" %}
-        <div class="dropdown">
         <a title="Menu" class="menu" _="on click toggle .enabled on the next <menu/> then halt" role="menuitem" aria-haspopup="menu">
-            <i class="fa-solid fa-caret-down"></i>
+          <i class="fa-solid fa-bars"></i>
         </a>
         <menu>
           <a href="{{ post.urls.view }}" role="menuitem">
@@ -92,7 +91,6 @@
           {% endif %}
         </menu>
       </div>
-      </div>
     {% endif %}
 
 </div>