From d2470b157f84844539c34adfaf77548069f47bd0 Mon Sep 17 00:00:00 2001
From: Arda Serdar Pektezol <1669855+pektezol@users.noreply.github.com>
Date: Sun, 26 Oct 2025 13:29:53 +0400
Subject: feat/frontend: tablet breakpoints (#285)

---
 frontend/src/components/Sidebar.tsx | 20 ++++++++++----------
 frontend/src/components/Summary.tsx |  4 ++--
 2 files changed, 12 insertions(+), 12 deletions(-)

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index c45ec27..0a7efa8 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -60,7 +60,7 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo
       setSidebarOpen(false);
       side.style.width = "320px"
       btn.forEach((e, i) => {
-        e.style.width = "310px"
+        e.style.width = (window.innerWidth > 1024) ? "310px" : "265px"
         e.style.padding = "0.4em 0 0 11px"
         setTimeout(() => {
           span[i].style.opacity = "1"
@@ -225,15 +225,15 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo
               </Link>
             ))}
             {searchData?.players.map((q, index) =>
-              (
-                <Link to={
-                  profile && q.steam_id === profile.steam_id ? "/profile" :
-                    `/users/${q.steam_id}`
-                } className='search-player' key={index} onClick={_close_mobile_search_and_menu}>
-                  <img src={q.avatar_link} alt='pfp'></img>
-                  <span style={{ fontSize: `${36 - q.user_name.length * 0.8}px` }}>{q.user_name}</span>
-                </Link>
-              ))}
+            (
+              <Link to={
+                profile && q.steam_id === profile.steam_id ? "/profile" :
+                  `/users/${q.steam_id}`
+              } className='search-player' key={index} onClick={_close_mobile_search_and_menu}>
+                <img src={q.avatar_link} alt='pfp'></img>
+                <span style={{ fontSize: `${36 - q.user_name.length * 0.8}px` }}>{q.user_name}</span>
+              </Link>
+            ))}
 
           </div>
         </div>
diff --git a/frontend/src/components/Summary.tsx b/frontend/src/components/Summary.tsx
index 72b5bf0..922960b 100644
--- a/frontend/src/components/Summary.tsx
+++ b/frontend/src/components/Summary.tsx
@@ -140,11 +140,11 @@ const Summary: React.FC<SummaryProps> = ({ selectedRun, setSelectedRun, data })
       <section id='section4' className='summary1'>
         <div id='difficulty'>
           <span>Difficulty</span>
-          {data.map.difficulty <= 2 && (<span style={{ color: "lime" }}>Very easy</span>)}
+          {data.map.difficulty <= 2 && (<span style={{ color: "lime" }}>Very Easy</span>)}
           {data.map.difficulty > 2 && data.map.difficulty <= 4 && (<span style={{ color: "green" }}>Easy</span>)}
           {data.map.difficulty > 4 && data.map.difficulty <= 6 && (<span style={{ color: "yellow" }}>Medium</span>)}
           {data.map.difficulty > 6 && data.map.difficulty <= 8 && (<span style={{ color: "orange" }}>Hard</span>)}
-          {data.map.difficulty > 8 && data.map.difficulty <= 10 && (<span style={{ color: "red" }}>Very hard</span>)}
+          {data.map.difficulty > 8 && data.map.difficulty <= 10 && (<span style={{ color: "red" }}>Very Hard</span>)}
           <div>
             {data.map.difficulty <= 2 ? (<div className='difficulty-rating' style={{ backgroundColor: "lime" }}></div>) : (<div className='difficulty-rating'></div>)}
             {data.map.difficulty > 2 && data.map.difficulty <= 4 ? (<div className='difficulty-rating' style={{ backgroundColor: "green" }}></div>) : (<div className='difficulty-rating'></div>)}
-- 
cgit v1.2.3