Merge pull request 'Improve touch on the utilities bar for phone/tablet' (#130) from somoso/pyfedi:improve-utilities-bar-mobile into main

Reviewed-on: https://codeberg.org/rimu/pyfedi/pulls/130

app/static/structure.css

@@ -534,8 +534,7 @@ fieldset legend {
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
-  border-radius: 5px 5px 0 0;
-  /* top-left | top-right | bottom-right | bottom-left */
+  border-radius: 5px 5px 0 0; /* top-left | top-right | bottom-right | bottom-left */
   height: 176px;
   margin-left: -12px;
   margin-right: -12px;
@@ -667,6 +666,9 @@ fieldset legend {
 .post_list .post_teaser .utilities_row a {
   display: inline-block;
   min-width: 44px;
+  min-height: 44px;
+  justify-content: center;
+  align-content: center;
 }
 .post_list .post_teaser .utilities_row .preview_image, .post_list .post_teaser .utilities_row .post_options {
   text-align: center;
@@ -726,6 +728,19 @@ fieldset legend {
   font-size: 80%;
 }
 
+.post_utilities_bar {
+  display: flex;
+  min-height: 44px;
+}
+.post_utilities_bar .post_options_link {
+  display: flex;
+  width: 44px;
+  height: 44px;
+  padding: 3px;
+  justify-content: center;
+  align-items: center;
+}
+
 .post_list_masonry, .post_list_masonry_wide {
   -webkit-column-count: 2;
   -moz-column-count: 2;
@@ -1149,7 +1164,7 @@ fieldset legend {
   padding: 5px 15px;
 }
 .comment .replies {
-  margin-top: 0px;
+  margin-top: 0;
   border-left: solid 1px #ddd;
   border-top: solid 1px #ddd;
 }

app/static/structure.scss

@@ -268,7 +268,10 @@ html {
     .utilities_row {
       a {
         display: inline-block;
-        min-width: 44px;
+        min-width: $min-touch-target;
+        min-height: $min-touch-target;
+        justify-content: center;
+        align-content: center;
       }
       .preview_image, .post_options {
         text-align: center;
@@ -339,6 +342,20 @@ html {
   }
 }
 
+.post_utilities_bar {
+  display: flex;
+  min-height: $min-touch-target;
+
+  .post_options_link {
+    display: flex;
+    width: $min-touch-target;
+    height: $min-touch-target;
+    padding: 3px;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
 .post_list_masonry, .post_list_masonry_wide {
   -webkit-column-count: 2;
   -moz-column-count: 2;
@@ -814,7 +831,7 @@ html {
   }
 
   .replies {
-    margin-top: 0px;
+    margin-top: 0;
     border-left: solid 1px $light-grey;
     border-top: solid 1px $light-grey;
   }

app/templates/post/_post_full.html

@@ -103,5 +103,7 @@
             </div>
         </div>
     {% endif %}
-    <a href="{{ url_for('post.post_options', post_id=post.id) }}" class="post_options_link" rel="nofollow"><span class="fe fe-options" title="Options"> </span></a>
+    <div class="post_utilities_bar">
+        <a href="{{ url_for('post.post_options', post_id=post.id) }}" class="post_options_link" rel="nofollow"><span class="fe fe-options" title="Options"> </span></a>
+    </div>
 </div>