From 82abe4162c0c009ec5d3d9586894f92bba865715 Mon Sep 17 00:00:00 2001
From: Slipum <sabirovdanil7@gmail.com>
Date: Mon, 26 Jan 2026 16:05:27 +0300
Subject: [PATCH 1/2] feat: add adaptive design for match list

---
 .github/workflows/ci.yml  |  2 +-
 app/globals.css           | 98 ++++++++++++++++++++++++++++++++++++++-
 components/ListMaps.tsx   | 60 ++++++++++++++----------
 hooks/useClickOutside.tsx | 28 +++++++++++
 4 files changed, 160 insertions(+), 28 deletions(-)
 create mode 100644 hooks/useClickOutside.tsx

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index d383410..0da5a84 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -6,7 +6,7 @@ on:
       - "**"
   pull_request:
     branches:
-      - "**"
+      - master
   workflow_dispatch:
 
 jobs:
diff --git a/app/globals.css b/app/globals.css
index ec8b64f..25b6c64 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -456,6 +456,13 @@ tbody tr td {
   color: #f6f4f4;
 }
 
+.fa-clock-rotate-left {
+  position: absolute;
+  left: 0;
+  margin-left: 8%;
+  margin-top: 10px;
+}
+
 .td-tour {
   color: #eca23a;
 }
@@ -762,8 +769,9 @@ tbody tr td {
 
 /* Выпадающее меню */
 .dropdown-filter {
-  left: 25%;
-  margin-top: 3rem;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin-top: 12rem;
   background: #1b1b1b;
   border: 1px solid #ccc;
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
@@ -1073,6 +1081,23 @@ tbody tr td {
   color: #ff9226;
 }
 
+.adaptive-filter {
+  display: none;
+}
+
+.matches-container {
+  margin-bottom: 400px;
+}
+
+@media screen and (max-width: 1320px) {
+  .match-adr,
+  .match-hs,
+  .match-kr,
+  .match-kd {
+    display: none;
+  }
+}
+
 @media screen and (max-width: 1140px) {
   .text-logo,
   .h-logo img {
@@ -1084,6 +1109,24 @@ tbody tr td {
   }
 }
 
+@media screen and (max-width: 950px) {
+  #matches table thead {
+    display: none;
+  }
+
+  .adaptive-filter {
+    display: block;
+    font-size: 1.5rem;
+    align-items: center;
+    text-align: center;
+    padding: 10px 0;
+  }
+
+  .filter-button {
+    font-size: 1.25rem;
+  }
+}
+
 @media screen and (max-width: 850px) {
   #won-matches {
     margin-top: 10rem;
@@ -1106,6 +1149,57 @@ tbody tr td {
   .user-info {
     display: inline;
   }
+
+  .match-id .fa-clock-rotate-left {
+    display: none;
+  }
+
+  .fa-id {
+    color: #ff9226;
+  }
+}
+
+@media screen and (max-width: 760px) {
+  #matches table tbody tr {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  }
+
+  #matches tbody td {
+    border: none;
+    font-size: 1.5rem;
+  }
+
+  #matches .match-map img {
+    width: 130px;
+    height: 65px;
+  }
+
+  .match-kills,
+  .match-deaths,
+  .match-assists {
+    display: none;
+  }
+
+  .result-indicator {
+    font-size: 1.5rem;
+    margin: 8px 16px 8px;
+    padding: 10px;
+    width: 30px;
+    height: 30px;
+  }
+
+  .match-date,
+  .match-id,
+  .match-map,
+  .match-score,
+  .match-elo {
+    margin: auto 0;
+  }
+
+  .match-date p {
+    display: none;
+  }
 }
 
 @media screen and (max-width: 655px) {
diff --git a/components/ListMaps.tsx b/components/ListMaps.tsx
index 9ce6876..5ccbdb2 100644
--- a/components/ListMaps.tsx
+++ b/components/ListMaps.tsx
@@ -1,8 +1,9 @@
 import { getIconMap, headers } from "@/constants";
 import Image from "next/image";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import TitleMatches from "./TitleMatches";
+import { useClickOutside } from "@/hooks/useClickOutside";
 
 type StatType = {
   title: string;
@@ -80,6 +81,7 @@ export function ListMaps({
   // Фильтрация
   const [selectedMaps, setSelectedMaps] = useState<string[]>([]);
   const [isOpen, setIsOpen] = useState<boolean>(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
   const handleMapFilterChange = (map: string) => {
     setSelectedMaps((prev) =>
       prev.includes(map) ? prev.filter((m) => m !== map) : [...prev, map],
@@ -94,6 +96,8 @@ export function ListMaps({
   let wins: number = 0;
   let totalMatchesToday: number = 0;
 
+  useClickOutside(dropdownRef, isOpen, () => setIsOpen(false));
+
   useEffect(() => {
     const fetchMatches = async () => {
       try {
@@ -329,9 +333,10 @@ export function ListMaps({
         totalMatchesToday={totalMatchesToday}
         lastSessionElo={lastSessionElo}
       />
-      <div className="matches-container">
+      <div className="filter-container">
         {isOpen && (
           <div
+            ref={dropdownRef}
             className={`dropdown-filter  ${filteredMatches.length != 0 ? "f-1" : "f-2"}`}
           >
             {[
@@ -355,30 +360,38 @@ export function ListMaps({
             ))}
           </div>
         )}
+        <div className="match-map adaptive-filter">
+          Map
+          <span onClick={() => setIsOpen(!isOpen)} className="filter-button">
+            <i className="fa-solid fa-filter"></i>
+          </span>
+        </div>
+      </div>
+      <div className="matches-container">
         <div id="matches">
           <table>
             <thead>
               <tr>
-                <th>Match</th>
-                <th>Date</th>
-                <th>
+                <th className="match-id">Match</th>
+                <th className="match-date">Date</th>
+                <th className="match-map">
                   Map
                   <span
-                    onClick={() => setIsOpen(!isOpen)}
+                    onClick={() => setIsOpen((prev) => !prev)}
                     className="filter-button"
                   >
                     <i className="fa-solid fa-filter"></i>
                   </span>
                 </th>
-                <th>Score</th>
-                <th>Kills</th>
-                <th>Assists</th>
-                <th>Deaths</th>
-                <th>K/D</th>
-                <th>K/R</th>
-                <th>HS %</th>
-                <th>ADR</th>
-                <th>ELO</th>
+                <th className="match-score">Score</th>
+                <th className="match-kills">Kills</th>
+                <th className="match-assists">Assists</th>
+                <th className="match-deaths">Deaths</th>
+                <th className="match-kd">K/D</th>
+                <th className="match-kr">K/R</th>
+                <th className="match-hs">HS %</th>
+                <th className="match-adr">ADR</th>
+                <th className="match-elo">ELO</th>
               </tr>
             </thead>
             <tbody>
@@ -389,15 +402,7 @@ export function ListMaps({
                     <td className="match-id">
                       {day == new Date(match.date).toDateString() ? (
                         <>
-                          <i
-                            style={{
-                              position: "absolute",
-                              left: "0",
-                              marginLeft: "8%",
-                              marginTop: "10px",
-                            }}
-                            className="fa-solid fa-clock-rotate-left fa-lg td-tour"
-                          ></i>
+                          <i className="fa-solid fa-clock-rotate-left fa-lg td-tour"></i>
                         </>
                       ) : (
                         <></>
@@ -405,6 +410,7 @@ export function ListMaps({
                       <Link
                         href={`/${match.matchId}?from=${match.nickname}`}
                         rel="noopener noreferrer"
+                        className={`${day == new Date(match.date).toDateString() ? "fa-id" : ""}`}
                       >
                         {count}
                         <i
@@ -414,7 +420,11 @@ export function ListMaps({
                       </Link>
                     </td>
                     <td className="match-date">
-                      {new Date(match.date).toLocaleDateString()}
+                      {new Date(match.date).toLocaleDateString("en-EN", {
+                        day: "numeric",
+                        month: "short",
+                        year: "numeric",
+                      })}
                       <p>
                         (
                         {new Date(match.date).toLocaleTimeString([], {
diff --git a/hooks/useClickOutside.tsx b/hooks/useClickOutside.tsx
new file mode 100644
index 0000000..4f7c1fd
--- /dev/null
+++ b/hooks/useClickOutside.tsx
@@ -0,0 +1,28 @@
+import { RefObject, useEffect } from "react";
+
+export function useClickOutside(
+  ref: RefObject<HTMLDivElement | null>,
+  isOpen: boolean,
+  onClose: () => void,
+) {
+  useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (
+        ref.current &&
+        !ref.current.contains(event.target as Node) &&
+        !target.closest(".filter-button")
+      ) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClick);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+    };
+  }, [ref, isOpen, onClose]);
+}

From bc7cfac77a3773215a2169599ba3cf7a9fa0a191 Mon Sep 17 00:00:00 2001
From: Slipum <sabirovdanil7@gmail.com>
Date: Tue, 27 Jan 2026 19:30:13 +0300
Subject: [PATCH 2/2] feat: update adaptive design v2

---
 app/[id]/PlayerAvatar.tsx  |  10 ++-
 app/[id]/Team.tsx          |   7 +-
 app/[id]/idPage.tsx        |   2 +-
 app/globals.css            | 162 +++++++++++++++++++++++++++++++++++--
 components/AnotherStat.tsx |   2 +-
 components/ListMaps.tsx    |  37 +++++++--
 components/MapsWin.tsx     |  28 ++++---
 7 files changed, 215 insertions(+), 33 deletions(-)

diff --git a/app/[id]/PlayerAvatar.tsx b/app/[id]/PlayerAvatar.tsx
index 00d983a..fb6dc64 100644
--- a/app/[id]/PlayerAvatar.tsx
+++ b/app/[id]/PlayerAvatar.tsx
@@ -8,11 +8,11 @@ type PlayerProps = {
 
 const PlayerAvatar = ({ avatar, nickname }: PlayerProps) => {
   const [imageError, setImageError] = useState(false);
-
   return (
     <>
       {avatar && !imageError ? (
         <Image
+          className="player-ava"
           src={avatar}
           alt={nickname}
           width={78}
@@ -21,7 +21,13 @@ const PlayerAvatar = ({ avatar, nickname }: PlayerProps) => {
         />
       ) : (
         <div id="avatar">
-          <Image src="/Group1.png" alt="avatar" width={78} height={78} />
+          <Image
+            className="player-ava"
+            src="/Group1.png"
+            alt="avatar"
+            width={78}
+            height={78}
+          />
         </div>
       )}
     </>
diff --git a/app/[id]/Team.tsx b/app/[id]/Team.tsx
index c5199e5..3c250ac 100644
--- a/app/[id]/Team.tsx
+++ b/app/[id]/Team.tsx
@@ -87,6 +87,7 @@ export default function Team({ rounds, team, players, pos }: TeamProps) {
       {rounds &&
         (pos == "right" ? (
           <h1
+            className="team-result"
             style={{
               color: `${
                 Number(rounds[1]) > Number(rounds[0]) ? "#66bb6a" : "#ff4d4f"
@@ -95,10 +96,12 @@ export default function Team({ rounds, team, players, pos }: TeamProps) {
               width: "fit-content",
             }}
           >
+            <h1 className="team-name">{team.name}</h1>
             {rounds[1]}
           </h1>
         ) : (
           <h1
+            className="team-result"
             style={{
               color: `${
                 Number(rounds[0]) > Number(rounds[1]) ? "#66bb6a" : "#ff4d4f"
@@ -108,6 +111,7 @@ export default function Team({ rounds, team, players, pos }: TeamProps) {
             }}
           >
             {rounds[0]}
+            <h1 className="team-name">{team.name}</h1>
           </h1>
         ))}
       <div className={`${pos == "right" ? "left l" : "right r"}-container`}>
@@ -145,7 +149,7 @@ export default function Team({ rounds, team, players, pos }: TeamProps) {
             border: "none",
           }}
         />
-        <h1>{team.name}</h1>
+        <h1 className="team-name">{team.name}</h1>
         {pos == "left" && (
           <>
             <button
@@ -189,6 +193,7 @@ export default function Team({ rounds, team, players, pos }: TeamProps) {
                             src={`https://cdn-frontend.faceit-cdn.net/web/static/media/assets_images_skill-icons_skill_level_${getLVL(
                               player.elo,
                             )}_svg.svg`}
+                            className="lvl-player"
                             alt={getLVL(player.elo)}
                             width={32}
                             height={32}
diff --git a/app/[id]/idPage.tsx b/app/[id]/idPage.tsx
index aa772de..dc4d787 100644
--- a/app/[id]/idPage.tsx
+++ b/app/[id]/idPage.tsx
@@ -197,7 +197,7 @@ export default function IdPage({ params, fromPar }: IdPageProps) {
             pos="left"
           />
         )}
-        <div className="">
+        <div className="match-info">
           <h2 className="team-win">
             Winner is{" "}
             {match.summaryResults.winner == "faction1"
diff --git a/app/globals.css b/app/globals.css
index 25b6c64..b6ed46d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -522,7 +522,13 @@ tbody tr td {
   border-radius: 4px;
   text-align: center;
   font-weight: 800;
-  margin: 2px 4px 2px 0;
+}
+
+.recent .recent-results {
+  display: flex;
+  margin-top: 0.1rem;
+  gap: 0.5rem;
+  justify-content: center;
 }
 
 .icon-map {
@@ -545,7 +551,6 @@ tbody tr td {
 
 #maps-winnings div {
   text-align: center;
-  flex: 0 0 160px;
 }
 
 .icon-map {
@@ -847,6 +852,7 @@ tbody tr td {
 }
 
 .teams {
+  min-width: 300px;
   display: flex;
   justify-content: space-between;
 }
@@ -1038,7 +1044,7 @@ tbody tr td {
 .search-wr {
   position: absolute;
   top: 80px;
-  width: 200px;
+  width: 400px;
   max-width: 400px;
   padding: 10px 20px;
   gap: 10px;
@@ -1089,6 +1095,37 @@ tbody tr td {
   margin-bottom: 400px;
 }
 
+.match-elo-container {
+  display: flex;
+  margin: auto 0;
+  justify-content: center;
+  gap: 0.25rem;
+}
+
+.match-elo-container div,
+.match-elo-container p {
+  margin: auto 0;
+  justify-content: center;
+  display: flex;
+}
+
+.team-result .team-name {
+  display: none;
+}
+
+@media screen and (max-width: 1500px) {
+  .match-info {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .team-one,
+  .team-two {
+    margin-top: 200px;
+  }
+}
+
 @media screen and (max-width: 1320px) {
   .match-adr,
   .match-hs,
@@ -1125,6 +1162,40 @@ tbody tr td {
   .filter-button {
     font-size: 1.25rem;
   }
+
+  .teams {
+    display: block;
+    width: 100%;
+  }
+
+  .layout-match {
+    display: grid;
+    justify-content: center;
+  }
+
+  .layout-match .fa-reply {
+    left: 5%;
+    top: 1rem;
+  }
+
+  .team-two {
+    margin-top: 0;
+  }
+
+  .match-info {
+    top: 8.33%;
+    width: 100%;
+  }
+
+  .match-info .team-win {
+    margin: 0 auto;
+    width: fit-content;
+  }
+
+  .team-one,
+  .team-two {
+    margin-bottom: 200px;
+  }
 }
 
 @media screen and (max-width: 850px) {
@@ -1162,7 +1233,7 @@ tbody tr td {
 @media screen and (max-width: 760px) {
   #matches table tbody tr {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
   }
 
   #matches tbody td {
@@ -1171,8 +1242,8 @@ tbody tr td {
   }
 
   #matches .match-map img {
-    width: 130px;
-    height: 65px;
+    width: 170px;
+    height: 85px;
   }
 
   .match-kills,
@@ -1181,7 +1252,7 @@ tbody tr td {
     display: none;
   }
 
-  .result-indicator {
+  .match-elo-container .result-indicator {
     font-size: 1.5rem;
     margin: 8px 16px 8px;
     padding: 10px;
@@ -1212,9 +1283,29 @@ tbody tr td {
   .container,
   .chart-container,
   #maps-winnings,
-  #matches {
+  #matches,
+  .layout-match {
     width: 100%;
   }
+
+  .l-container button,
+  .r-container button {
+    font-size: 24px;
+  }
+
+  .search-wr {
+    width: 300px;
+    font-size: 2rem;
+  }
+
+  .search-wr img {
+    width: 72px;
+    height: 72px;
+  }
+
+  .title-all {
+    font-size: 2rem;
+  }
 }
 
 @media screen and (max-width: 530px) {
@@ -1225,4 +1316,59 @@ tbody tr td {
   .search-container button {
     display: none;
   }
+
+  .steam-name {
+    display: none;
+  }
+
+  #games {
+    width: 100%;
+  }
+
+  #games div {
+    width: 100%;
+  }
+
+  .player a {
+    display: inline;
+  }
+
+  .player-ava {
+    width: 100%;
+    height: fit-content;
+    margin: 0 auto;
+  }
+
+  .team-one,
+  .team-two {
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 460px) {
+  .user-info {
+    margin-top: 3rem;
+  }
+
+  .player {
+    padding: 5px 10px;
+  }
+
+  .l-container button {
+    padding-right: 1rem;
+  }
+
+  .r-container button {
+    padding-left: 1rem;
+  }
+
+  .right .team-name,
+  .left .team-name {
+    display: none;
+  }
+
+  .team-result .team-name {
+    font-size: 24px;
+    display: inline-block;
+  }
 }
diff --git a/components/AnotherStat.tsx b/components/AnotherStat.tsx
index 0549dc4..8065863 100644
--- a/components/AnotherStat.tsx
+++ b/components/AnotherStat.tsx
@@ -30,7 +30,7 @@ export function AnotherStat({ games }: AnotherStatProps) {
     <div className="game-info">
       <h2>{title}</h2>
       <div className="spaced">
-        <p>Steam Name: {game.game_player_name}</p>
+        <p className="steam-name">Steam Name: {game.game_player_name}</p>
         <p>Faceit Elo: {game.faceit_elo}</p>
         <p>
           Region:{" "}
diff --git a/components/ListMaps.tsx b/components/ListMaps.tsx
index 5ccbdb2..b8333b7 100644
--- a/components/ListMaps.tsx
+++ b/components/ListMaps.tsx
@@ -98,6 +98,8 @@ export function ListMaps({
 
   useClickOutside(dropdownRef, isOpen, () => setIsOpen(false));
 
+  const width = useWindowWidth();
+
   useEffect(() => {
     const fetchMatches = async () => {
       try {
@@ -397,7 +399,7 @@ export function ListMaps({
             <tbody>
               {filteredMatches.map((match, index) => {
                 const count = 100 - index;
-                return (
+                const row = (
                   <tr key={match.date}>
                     <td className="match-id">
                       {day == new Date(match.date).toDateString() ? (
@@ -484,6 +486,16 @@ export function ListMaps({
                     </td>
                   </tr>
                 );
+                return width < 760 ? (
+                  <Link
+                    href={`/${match.matchId}?from=${match.nickname}`}
+                    rel="noopener noreferrer"
+                  >
+                    {row}
+                  </Link>
+                ) : (
+                  row
+                );
               })}
             </tbody>
           </table>
@@ -537,13 +549,10 @@ function getEloChange(currentElo: number, previousElo: number, i?: number) {
       );
     }
     return (
-      <span
-        style={{ display: "inline-flex", gap: "5px" }}
-        className={changeClass}
-      >
-        {currentElo}
+      <div className={`match-elo-container ${changeClass}`}>
+        <div className="match-elo-curr">{currentElo}</div>
         {changeText}
-      </span>
+      </div>
     );
   }
 }
@@ -562,3 +571,17 @@ function getFire(value: number, fire: number) {
   if (value >= fire) return "fa-solid fa-fire";
   return "";
 }
+
+function useWindowWidth() {
+  const [width, setWidth] = useState(
+    typeof window !== "undefined" ? window.innerWidth : 0,
+  );
+
+  useEffect(() => {
+    const handleResize = () => setWidth(window.innerWidth);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return width;
+}
diff --git a/components/MapsWin.tsx b/components/MapsWin.tsx
index 249418b..958974c 100644
--- a/components/MapsWin.tsx
+++ b/components/MapsWin.tsx
@@ -86,22 +86,24 @@ export function MapsWin({ arr, winrate, qualityMap }: mapsProps) {
                   </p>
                   <span>{mapKey.replace("de_", "").toUpperCase()}</span>
                 </div>
-                <div>
+                <div className="recent">
                   <span style={{ display: "inline-block", width: "100%" }}>
                     Recent results
                   </span>
-                  {arr[mapKey] &&
-                    arr[mapKey].split("").map((char, index) => (
-                      <div
-                        key={`${mapKey}-${index}`}
-                        style={{
-                          backgroundColor: char == "1" ? "green" : "red",
-                        }}
-                        className="result-indicator"
-                      >
-                        {char == "1" ? "W" : "L"}
-                      </div>
-                    ))}
+                  <div className="recent-results">
+                    {arr[mapKey] &&
+                      arr[mapKey].split("").map((char, index) => (
+                        <div
+                          key={`${mapKey}-${index}`}
+                          style={{
+                            backgroundColor: char == "1" ? "green" : "red",
+                          }}
+                          className="result-indicator"
+                        >
+                          {char == "1" ? "W" : "L"}
+                        </div>
+                      ))}
+                  </div>
                 </div>
               </div>
             );