fix: restore desktop drag bar and top spacing (#316)

Author: Siri-Ray

apps/desktop/src/runtime-page.css

@@ -193,9 +193,9 @@ body,
 .window-drag-bar {
   position: fixed;
   top: 0;
-  left: 112px; /* Leave space for traffic lights + sidebar toggle */
-  width: 240px;
-  height: 30px;
+  left: 100px; /* Leave space for traffic lights + sidebar toggle */
+  right: 0;
+  height: 38px;
   z-index: 9999;
   -webkit-app-region: drag;
 }

apps/web/src/pages/home.tsx

@@ -185,6 +185,12 @@ function getChannelStatusMeta(
 export function HomePage() {
   const { t } = useTranslation();
   const { stars } = useGitHubStars();
+  const isDesktopClient = useMemo(
+    () =>
+      typeof navigator !== "undefined" &&
+      navigator.userAgent.includes("Electron"),
+    [],
+  );
   const [modalChannel, setModalChannel] = useState<
     "feishu" | "slack" | "discord" | null
   >(null);
@@ -592,7 +598,10 @@ export function HomePage() {
      ══════════════════════════════════════════════════════════════════════ */
   return (
     <div className="h-full overflow-y-auto">
-      <div className="max-w-4xl mx-auto px-4 sm:px-6 py-6 sm:py-8 space-y-6">
+      <div
+        className="max-w-4xl mx-auto px-4 sm:px-6 pb-6 sm:pb-8 space-y-6"
+        style={{ paddingTop: isDesktopClient ? "2rem" : "1.5rem" }}
+      >
         {/* ═══ TOP: Hero — Bot running (horizontal layout) ═══ */}
         <div className="flex items-center gap-4">
           <div

apps/web/src/pages/models.tsx

@@ -777,6 +777,12 @@ function _CurrentModelSelector({
 export function ModelsPage() {
   const { t } = useTranslation();
   const { stars } = useGitHubStars();
+  const isDesktopClient = useMemo(
+    () =>
+      typeof navigator !== "undefined" &&
+      navigator.userAgent.includes("Electron"),
+    [],
+  );
   const [searchParams, setSearchParams] = useSearchParams();
   const isSetupMode = searchParams.get("setup") === "1";
   const tabParam = searchParams.get("tab");
@@ -959,7 +965,10 @@ export function ModelsPage() {
 
   return (
     <div className="h-full overflow-y-auto">
-      <div className="max-w-4xl mx-auto px-4 sm:px-6 pt-2 pb-6 sm:pb-8">
+      <div
+        className="max-w-4xl mx-auto px-4 sm:px-6 pb-6 sm:pb-8"
+        style={{ paddingTop: isDesktopClient ? "2rem" : "0.5rem" }}
+      >
         <div className="flex items-center justify-between mb-6">
           <div>
             <h2 className="heading-page">{t("models.pageTitle")}</h2>

apps/web/src/pages/skills.tsx

@@ -172,6 +172,12 @@ function SkillCard({
 export function SkillsPage() {
   const { t } = useTranslation();
   const { stars } = useGitHubStars();
+  const isDesktopClient = useMemo(
+    () =>
+      typeof navigator !== "undefined" &&
+      navigator.userAgent.includes("Electron"),
+    [],
+  );
   const { locale } = useLocale();
   const { data, isLoading, isError } = useCommunitySkills();
   const refreshMutation = useRefreshCatalog();
@@ -413,7 +419,10 @@ export function SkillsPage() {
 
   return (
     <div className="h-full overflow-y-auto">
-      <div className="max-w-4xl mx-auto px-4 sm:px-6 pt-2 pb-6 sm:pb-8">
+      <div
+        className="max-w-4xl mx-auto px-4 sm:px-6 pb-6 sm:pb-8"
+        style={{ paddingTop: isDesktopClient ? "2rem" : "0.5rem" }}
+      >
         {/* Header */}
         <div className="flex items-center justify-between mb-10">
           <div>