Update files

frontend/src/components/CommentsModal.css

@@ -16,8 +16,8 @@
 
 .comments-modal {
   width: 100%;
-  max-height: 50vh;
+  max-height: 80vh;
-  height: 50vh;
+  height: 80vh;
   background: var(--bg-secondary);
   display: flex;
   flex-direction: column;
@@ -112,11 +112,13 @@
 .comments-list {
   flex: 1;
   overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
   padding: 16px;
-  padding-bottom: 100px;
+  padding-bottom: 120px; /* Больше отступ для формы ввода */
   display: flex;
   flex-direction: column;
   gap: 16px;
+  min-height: 0; /* Важно для правильного скролла */
 }
 
 .loading-state {
@@ -206,18 +208,19 @@
 }
 
 .comment-form {
-  position: fixed;
+  position: sticky;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 12px 16px;
-  padding-bottom: calc(12px + 80px); /* Отступ для навигации */
   background: var(--bg-secondary);
   border-top: 1px solid var(--divider-color);
   display: flex;
   gap: 8px;
-  z-index: 1000;
+  z-index: 10;
-  /* Убираем pointer-events и touch-action чтобы клики работали */
+  flex-shrink: 0;
+  /* Поддержка виртуальной клавиатуры */
+  padding-bottom: max(12px, env(safe-area-inset-bottom));
 }
 
 .comment-form input {

frontend/src/pages/CommentsPage.css

@@ -114,11 +114,13 @@
 .comments-list {
   flex: 1;
   overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
   padding: 16px;
-  padding-bottom: 100px;
+  padding-bottom: 120px; /* Больше отступ для формы ввода */
   display: flex;
   flex-direction: column;
   gap: 16px;
+  min-height: 0; /* Важно для правильного скролла */
 }
 
 .empty-comments {
@@ -249,16 +251,17 @@
 
 .comment-form {
   position: fixed;
-  bottom: 0;
+  bottom: 80px; /* Выше навигации */
   left: 0;
   right: 0;
   padding: 12px 16px;
-  padding-bottom: calc(12px + 80px); /* Отступ для навигации */
   background: var(--bg-secondary);
   border-top: 1px solid var(--divider-color);
   display: flex;
   gap: 8px;
   z-index: 1000;
+  /* Поддержка виртуальной клавиатуры */
+  padding-bottom: max(12px, env(safe-area-inset-bottom));
 }
 
 .comment-form input {

frontend/src/pages/MonthlyLadder.css

@@ -350,6 +350,9 @@
   gap: 12px;
   flex-shrink: 0;
   margin-left: auto;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
 }
 
 .user-tickets {
@@ -359,11 +362,23 @@
   white-space: nowrap;
 }
 
-.user-prize {
+.user-prize-info {
-  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+.user-rank-text {
+  font-size: 12px;
   color: var(--text-secondary);
   font-weight: 500;
-  white-space: nowrap;
+}
+
+.user-prize {
+  font-size: 14px;
+  color: var(--text-primary);
+  font-weight: 600;
 }
 
 .current-badge {

frontend/src/pages/MonthlyLadder.jsx

@@ -201,7 +201,12 @@ export default function MonthlyLadder({ user }) {
                   </div>
                   <div className="user-stats">
                     <span className="user-tickets">{formatTickets(topUser.tickets)} билетов</span>
-                    {prize && <span className="user-prize">{prize}</span>}
+                    {prize && (
+                      <div className="user-prize-info">
+                        <span className="user-rank-text">{topUser.rank} место</span>
+                        <span className="user-prize">{prize}</span>
+                      </div>
+                    )}
                   </div>
                 </div>
               )
@@ -231,6 +236,9 @@ export default function MonthlyLadder({ user }) {
             </div>
             <div className="user-stats">
               <span className="user-tickets">{formatTickets(currentUser.tickets)} билетов</span>
+              <div className="user-prize-info">
+                <span className="user-rank-text">{currentUserRank} место</span>
+              </div>
             </div>
           </div>
         </div>