fix: issue close/comment buttons on mobile (#17317)

* fix: issue close/comment buttons on mobile

* fix: lint

Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

1 files changed, 39 insertions, 29 deletions

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 9f32f427f3..69f58e26b0 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -702,9 +702,11 @@
           margin-left: 10px;
           margin-top: 10px;
         }
+
         .branch-update.grid {
           .row {
             padding-bottom: 1rem;
+
             .icon {
               margin-top: 1.1rem;
             }
@@ -801,6 +803,7 @@
         .timeline-avatar {
           position: absolute;
           left: -72px;
+
           img {
             width: 40px !important;
             height: 40px !important;
@@ -980,43 +983,44 @@
         }
 
         .content {
-          > .merge-section {
-            background-color: var(--color-box-body);
+          @media @mediaSm {
+            .form .button {
+              width: 100%;
+              margin: 0;
 
-            .item {
-              padding: .25rem 0;
+              &:not(:last-child) {
+                margin-bottom: 1rem;
+              }
             }
+          }
+        }
 
-            .item-section {
-              display: flex;
-              align-items: center;
-              justify-content: space-between;
-              padding: 0;
-              margin-top: -.25rem;
-              margin-bottom: -.25rem;
-            }
+        > .merge-section {
+          background-color: var(--color-box-body);
 
-            .divider {
-              margin-left: -1rem;
-              margin-right: -1rem;
-            }
+          .item {
+            padding: .25rem 0;
+          }
 
-            &.no-header {
-              #avatar-arrow();
+          .item-section {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0;
+            margin-top: -.25rem;
+            margin-bottom: -.25rem;
+          }
 
-              &::after {
-                border-right-color: var(--color-box-body);
-              }
-            }
+          .divider {
+            margin-left: -1rem;
+            margin-right: -1rem;
+          }
 
-            @media @mediaSm {
-              .form .button {
-                width: 100%;
+          &.no-header {
+            #avatar-arrow();
 
-                &:not(:last-child) {
-                  margin-bottom: 1rem;
-                }
-              }
+            &::after {
+              border-right-color: var(--color-box-body);
             }
           }
 
@@ -1727,6 +1731,7 @@
         padding: 0;
         border-radius: 0;
       }
+
       img.emoji {
         padding: 0;
       }
@@ -1954,6 +1959,7 @@
       .wrap_remove {
         height: 38px;
       }
+
       .attachment_edit {
         width: 450px !important;
       }
@@ -2781,6 +2787,7 @@ tbody.commit-list {
   tr.commit-list {
     width: 100%;
   }
+
   th .message-wrapper {
     display: block;
     max-width: calc(100vw - 70px);
@@ -2791,6 +2798,7 @@ tbody.commit-list {
   tr.commit-list {
     width: 723px;
   }
+
   th .message-wrapper {
     max-width: 280px;
   }
@@ -2800,6 +2808,7 @@ tbody.commit-list {
   tr.commit-list {
     width: 933px;
   }
+
   th .message-wrapper {
     max-width: 490px;
   }
@@ -2809,6 +2818,7 @@ tbody.commit-list {
   tr.commit-list {
     width: 1127px;
   }
+
   th .message-wrapper {
     max-width: 680px;
   }