Новые правки в компоенты

frontend/src/components/blog/comments/Comments.tsx

@@ -1,38 +1,17 @@
 import { createSignal, For, Show, onMount } from "solid-js";
 import CommentLock from "./CommentLock";
 import CommentForm from "./CommentForm";
-import type { CommentWithReplies } from "../../../types/comments";
-
-interface CommentsProps {
-  postSlug: string;
-}
-
-interface ApiComment {
-  id: string;
-  post_slug: string;
-  user: string;
-  content: string;
-  parent?: string | null;
-  is_verified: boolean;
-  status: "pending" | "published" | "spam";
-  created: string;
-  updated: string;
-  expand?: {
-    user?: {
-      id: string;
-      firstName?: string;
-      name?: string;
-      email: string;
-      avatar?: string;
-    };
-  };
-}
+import type { CommentWithReplies, CommentRecord } from "../../../types/comments";
 
 interface ToastMessage {
   type: "success" | "error";
   message: string;
 }
 
+interface CommentsProps {
+  postSlug: string;
+}
+
 export default function Comments(props: CommentsProps) {
   const [isAuthenticated, setIsAuthenticated] = createSignal(false);
   const [currentUser, setCurrentUser] = createSignal<{
@@ -95,7 +74,7 @@ export default function Comments(props: CommentsProps) {
       const data = await response.json();
 
       const commentsWithReplies: CommentWithReplies[] = await Promise.all(
-        data.items.map(async (comment: ApiComment) => {
+        data.items.map(async (comment: CommentRecord) => {
           const repliesResponse = await fetch(
             `/api/comments?post_slug=${encodeURIComponent(props.postSlug)}&parent=${comment.id}`,
             {
@@ -289,6 +268,15 @@ export default function Comments(props: CommentsProps) {
 
   return (
     <>
+      <style>{`
+        @media (max-width: 768px) {
+          .comments-wrapper { padding: 0 0.75rem; }
+          .comments-wrapper h3 { font-size: 1.5rem !important; }
+          .comment-card { padding: 1rem !important; }
+          .comment-avatar { width: 40px !important; height: 40px !important; }
+          .reply-form { margin-left: 0 !important; padding-left: 1rem !important; }
+        }
+      `}</style>
       <Show when={toast()}>
         {(t) => (
           <div