Намутил удобностей и мобильного дезигна

app/assets/styles/home.css

@@ -70,6 +70,30 @@
     margin-top: 10px;
 }
 
+@media (width <= 570px) {
+
+    .report-tag-list {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 16px;
+    }
+
+    .report-tag {
+        > .report-tag-count-good {
+            color: var(--tag-color-good);
+        }
+        > .report-tag-count-ok {
+            color: var(--tag-color-ok);
+        }
+        > .report-tag-count-bad {
+            color: var(--tag-color-bad);
+        }
+        > .report-tag-count-very-bad {
+            color: var(--tag-color-very-bad);
+        }
+    }
+}
+
 .report-comment:hover {
     background-color: #383d49;
     cursor: default;

app/components/itemDialog.tsx

@@ -4,29 +4,46 @@ import NicknameList from "~/components/itemDialog/nicknameList";
 import CommentsList from "~/components/itemDialog/commentsList";
 import TagList from "~/components/itemDialog/tagList";
 import TitleHeader from "~/components/itemDialog/titleHeader";
+import useWindowDimensions from "~/hooks/windowDimensions";
+import trimLink from "~/functions/trimLink";
 
 export default function ItemDialog({ blacklistItem, open, handleClose }: { blacklistItem: BlacklistItem|null, open: boolean, handleClose: Function }){
-    return (
+    if (blacklistItem){
-        <Dialog
+        const { width } = useWindowDimensions();
-            open={open}
+        return (
-            onClose={() => handleClose()}
+            <Dialog
-        >
+                open={open}
-            <DialogTitle>
+                onClose={() => handleClose()}
-                <TitleHeader name={blacklistItem?.link} handleClose={handleClose}/>
+            >
-                <TagList
+                <DialogTitle>
-                    afk={blacklistItem?.afk}
+                    <TitleHeader name={width < 570 ? trimLink(blacklistItem?.link) : blacklistItem?.link} handleClose={handleClose}/>
-                    cheater={blacklistItem?.cheater}
+                    <TagList
-                    griefer={blacklistItem?.griefer}
+                        afk={blacklistItem?.afk}
-                    toxic={blacklistItem?.toxic}
+                        cheater={blacklistItem?.cheater}
-                    useless={blacklistItem?.useless}
+                        griefer={blacklistItem?.griefer}
-                    smurf={blacklistItem?.smurf}
+                        toxic={blacklistItem?.toxic}
-                />
+                        useless={blacklistItem?.useless}
-            </DialogTitle>
+                        smurf={blacklistItem?.smurf}
-            <Divider sx={{marginTop: '10px', marginBottom: '10px', alignSelf: 'center'}}/>
+                    />
-            <DialogContent>
+                </DialogTitle>
-                <NicknameList nicknames={blacklistItem?.nicknames}/>
+                <Divider sx={{marginTop: '10px', marginBottom: '10px', alignSelf: 'center'}}/>
-                <CommentsList comments={blacklistItem?.comments}/>
+                <DialogContent>
-            </DialogContent>
+                    <NicknameList nicknames={blacklistItem?.nicknames}/>
-        </Dialog>
+                    <CommentsList comments={blacklistItem?.comments}/>
-    )
+                </DialogContent>
+            </Dialog>
+        )
+    } else {
+        return (
+            <Dialog
+                open={open}
+                onClose={() => handleClose()}
+            >
+                <DialogContent>
+                    Error: No item
+                </DialogContent>
+            </Dialog>
+        )
+    }
+
 }

app/components/itemList.tsx

@@ -1,5 +1,7 @@
 import {BlacklistItem} from "~/classes/blacklistItem";
 import {Button, CircularProgress} from "@mui/material";
+import useWindowDimensions from "~/hooks/windowDimensions";
+import trimLink from "~/functions/trimLink";
 
 export default function ItemList({ isFetching, blacklistItems, showDialog }: { isFetching: boolean, blacklistItems: BlacklistItem[], showDialog: Function }) {
     if (isFetching){
@@ -10,11 +12,12 @@ export default function ItemList({ isFetching, blacklistItems, showDialog }: { i
         )
     } else {
         if (blacklistItems.length > 0){
+            const { width } = useWindowDimensions();
             return (
                 <div className="list-container">
                     <div className="item-list">
                         {blacklistItems.map((item) => {
-                            return <Button onClick={() => showDialog(item)} variant="text">{item.link}</Button>
+                            return <Button onClick={() => showDialog(item)} variant="text">{width < 570 ? trimLink(item.link) : item.link}</Button>
                         })}
                     </div>
                 </div>

app/components/reportDialog.tsx

@@ -1,4 +1,3 @@
-import type {BlacklistItem} from "~/classes/blacklistItem";
 import {
     Button,
     Checkbox,
@@ -41,8 +40,16 @@ export default function ReportDialog({ open, handleClose }: { open: boolean, han
 
     const handleSend = async () => {
         setLoading(true);
+
+        let cleanLink = link.trim().toLowerCase();
+
+        if (cleanLink.endsWith('/')) {
+            cleanLink = cleanLink.slice(0, -1);
+        }
+
+        setLink(cleanLink);
         let blacklistReport = new BlacklistReport(
-            link,
+            cleanLink,
             nickname,
             comment,
             afk,
@@ -52,8 +59,9 @@ export default function ReportDialog({ open, handleClose }: { open: boolean, han
             useless,
             smurf
         );
+
         await sendReport(blacklistReport).then((result: boolean) => {
-            setLoading(true);
+            setLoading(false);
             clearValues();
             handleClose();
         });
@@ -138,7 +146,7 @@ export default function ReportDialog({ open, handleClose }: { open: boolean, han
                         />
                     </div>
                     <div style={{width: '100%', display: 'flex', justifyContent: 'space-around'}}>
-                        <Button onClick={() => handleSend()} variant="contained">Send</Button>
+                        <Button loading={loading} onClick={() => handleSend()} variant="contained">Send</Button>
                         <Button onClick={() => handleClose()} variant="outlined">Cancel</Button>
                     </div>
                 </DialogContent>

app/functions/trimLink.ts

@@ -0,0 +1,9 @@
+export default function trimLink(link: string){
+    if (link.includes('/id')){
+        return link.split('/id')[1];
+    } else if (link.includes('/profiles')){
+        return link.split('/profiles')[1];
+    } else {
+        return link;
+    }
+}

app/hooks/windowDimensions.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+
+export default function useWindowDimensions() {
+    // На сервере инициализируем значениями по умолчанию (0 или null)
+    const [dimensions, setDimensions] = useState({
+        width: typeof window !== 'undefined' ? window.innerWidth : 0,
+        height: typeof window !== 'undefined' ? window.innerHeight : 0,
+    });
+
+    useEffect(() => {
+        // Этот код гарантированно выполнится ТОЛЬКО в браузере
+        function handleResize() {
+            setDimensions({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+
+        // Устанавливаем точные размеры сразу при монтировании
+        handleResize();
+
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    return dimensions;
+}