Improve mobile review ui (#31091)

Fixes: https://github.com/go-gitea/gitea/issues/31071

Not perfect but much better than before.

Before: Overflows, sticky not working, filename unreadable:

<img width="506" alt="Screenshot 2024-05-27 at 02 02 40"
src="https://github.com/go-gitea/gitea/assets/115237/a06b1edf-dece-4402-98c2-68670fca265f">

After:
<img width="457" alt="Screenshot 2024-05-27 at 01 59 06"
src="https://github.com/go-gitea/gitea/assets/115237/2a282c96-e719-4554-b418-81963ae6269c">

web_src/css/modules/comment.css

@@ -14,6 +14,7 @@
 }
 
 .ui.comments .comment {
+  display: flex;
   position: relative;
   background: none;
   margin: 3px 0 0;
@@ -23,6 +24,10 @@
   line-height: 1.2;
 }
 
+.edit-content-zone .comment {
+  flex-direction: column;
+}
+
 .ui.comments .comment:first-child {
   margin-top: 0;
   padding-top: 0;
@@ -46,16 +51,17 @@
 }
 
 .ui.comments .comment .avatar {
-  float: left;
-  width: 2.5em;
+  width: 30px;
 }
 
 .ui.comments .comment > .content {
-  display: block;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
 
 .ui.comments .comment > .avatar ~ .content {
-  margin-left: 3.5em;
+  margin-left: 12px;
 }
 
 .ui.comments .comment .author {

web_src/css/modules/segment.css

@@ -156,7 +156,8 @@
 .ui.attached.segment:last-child,
 .ui.segment:has(+ .ui.segment:not(.attached)),
 .ui.attached.segment:has(+ .ui.modal) {
-  border-radius: 0 0 0.28571429rem 0.28571429rem;
+  border-bottom-left-radius: 0.28571429rem;
+  border-bottom-right-radius: 0.28571429rem;
 }
 
 .ui[class*="top attached"].segment {