From 8b5b67522d9c4ee4d7214131ff3674d1393e0670 Mon Sep 17 00:00:00 2001
From: corgifist <sxuare.science@gmail.com>
Date: Tue, 29 Jul 2025 03:50:08 +0300
Subject: [PATCH] git commit hash is now short on phones and long on desktops
 and tablets

---
 src/app/settings/page.tsx | 6 ++++--
 src/hooks/use-mobile.ts   | 6 +++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index e930586..62afa1a 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -14,6 +14,8 @@ import { getBuildID, getVersion } from "@/lib/build";
 
 export default function Settings(): ReactNode {
     const isMobile = useIsMobile();
+    const shortBuildId = useIsMobile(1024);
+    const buildID = getBuildID();
 
     return (
         <div className="p-5 w-full h-full">
@@ -48,9 +50,9 @@ export default function Settings(): ReactNode {
                             </AscendingCard>
                         </Link>
                         <Link className="text-sm text-muted-foreground flex justify-center" target="_blank" href={
-                            `https://github.com/ClipFusion-org/clipfusion/commit/${getBuildID()}`
+                            `https://github.com/ClipFusion-org/clipfusion/commit/${buildID}`
                         }>
-                            {getVersion()} ({getBuildID()})
+                            {getVersion()} ({shortBuildId ? buildID?.slice(0, 7) : buildID})
                         </Link>
                     </div>
                 </WideContainer>
diff --git a/src/hooks/use-mobile.ts b/src/hooks/use-mobile.ts
index 0a414a4..7302227 100644
--- a/src/hooks/use-mobile.ts
+++ b/src/hooks/use-mobile.ts
@@ -2,15 +2,15 @@ import * as React from "react"
 
 const MOBILE_BREAKPOINT = 768
 
-export function useIsMobile() {
+export function useIsMobile(breakpoint: number = MOBILE_BREAKPOINT) {
     const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
 
     React.useEffect(() => {
         const onResize = () => {
-            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+            setIsMobile(window.innerWidth < breakpoint)
         };
         window.addEventListener("resize", onResize)
-        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+        setIsMobile(window.innerWidth < breakpoint)
         return () => window.removeEventListener("resize", onResize)
     }, []);