From fb06def5aad1b03c06d5ec9ebcd81d4210cb96f2 Mon Sep 17 00:00:00 2001
From: Blomios <blomios@gmail.com>
Date: Thu, 23 Apr 2026 09:14:17 +0200
Subject: [PATCH] fix: close and reduce button not displayed when window not
 large enough fixed

---
 src/components/TitleBar.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx
index 9808d73..4f5a4c4 100644
--- a/src/components/TitleBar.tsx
+++ b/src/components/TitleBar.tsx
@@ -1,12 +1,24 @@
+import { useEffect, useState } from "react";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { useStore } from "../store";
 
+function useWindowWidth() {
+  const [width, setWidth] = useState(window.innerWidth);
+  useEffect(() => {
+    const handler = () => setWidth(window.innerWidth);
+    window.addEventListener("resize", handler);
+    return () => window.removeEventListener("resize", handler);
+  }, []);
+  return width;
+}
+
 interface Props {
   onOpenSettings: () => void;
 }
 
 export default function TitleBar({ onOpenSettings }: Props) {
   const { view, closeGuide, activeGuideData } = useStore();
+  const windowWidth = useWindowWidth();
 
   function handleDragMouseDown(e: React.MouseEvent) {
     if (e.button === 0) {
@@ -43,7 +55,7 @@ export default function TitleBar({ onOpenSettings }: Props) {
         <span style={{ pointerEvents: "none", fontSize: "13px", fontWeight: 700, color: "#f0c040", letterSpacing: "0.05em" }}>
           TougliGui
         </span>
-        {view === "guide" && activeGuideData && (
+        {view === "guide" && activeGuideData && windowWidth >= 400 && (
           <>
             <span style={{ pointerEvents: "none", color: "#4a5568", fontSize: "12px" }}>›</span>
             <span style={{ pointerEvents: "none", fontSize: "12px", color: "#94a3b8" }}>{activeGuideData.name}</span>