Новые изменения в компонеты

frontend/src/components/blog/PostCommentForm.astro

@@ -319,6 +319,98 @@ const { postId, isAuthorized = false } = Astro.props;
       margin-left: 1rem;
     }
   }
+
+  @media (max-width: 480px) {
+    .comment-form {
+      padding: 1rem;
+    }
+
+    .comment-title {
+      font-size: 1.1rem;
+      margin-bottom: 0.75rem;
+    }
+
+    .form-group {
+      margin-bottom: 0.75rem;
+    }
+
+    .form-input {
+      padding: 0.5rem 0.65rem;
+      font-size: 0.85rem;
+    }
+
+    .form-input::placeholder {
+      font-size: 0.8rem;
+    }
+
+    .form-textarea {
+      padding: 0.5rem 0.65rem;
+      font-size: 0.85rem;
+      min-height: 100px;
+    }
+
+    .form-textarea::placeholder {
+      font-size: 0.8rem;
+    }
+
+    .submit-btn {
+      padding: 0.6rem 1rem;
+      font-size: 0.9rem;
+      border-radius: 6px;
+    }
+
+    .comment-reply {
+      margin-left: 0.5rem;
+      padding-left: 0.75rem;
+    }
+
+    .loading-spinner {
+      width: 16px;
+      height: 16px;
+    }
+
+    .form-actions {
+      gap: 0.5rem;
+    }
+  }
+
+  @media (max-width: 375px) {
+    .comment-form {
+      padding: 0.75rem;
+    }
+
+    .comment-title {
+      font-size: 1rem;
+    }
+
+    .form-input,
+    .form-textarea {
+      padding: 0.45rem 0.55rem;
+      font-size: 0.8rem;
+    }
+
+    .submit-btn {
+      padding: 0.55rem 0.85rem;
+      font-size: 0.85rem;
+    }
+  }
+
+  @media (max-width: 320px) {
+    .comment-form {
+      padding: 0.5rem;
+    }
+
+    .form-input,
+    .form-textarea {
+      padding: 0.4rem 0.5rem;
+      font-size: 0.75rem;
+    }
+
+    .submit-btn {
+      padding: 0.5rem 0.75rem;
+      font-size: 0.8rem;
+    }
+  }
 </style>
 
 <script>