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

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,15 +4,19 @@ 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 }){
+    if (blacklistItem){
+        const { width } = useWindowDimensions();
         return (
             <Dialog
                 open={open}
                 onClose={() => handleClose()}
             >
                 <DialogTitle>
-                <TitleHeader name={blacklistItem?.link} handleClose={handleClose}/>
+                    <TitleHeader name={width < 570 ? trimLink(blacklistItem?.link) : blacklistItem?.link} handleClose={handleClose}/>
                     <TagList
                         afk={blacklistItem?.afk}
                         cheater={blacklistItem?.cheater}
@@ -29,4 +33,17 @@ export default function ItemDialog({ blacklistItem, open, handleClose }: { black
                 </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;
+}