Hide "Connect to CDN" and "Get Started" buttons when screen is narrow (#7381)

Author: jdolle

.changeset/chubby-sites-remain.md

@@ -0,0 +1,5 @@
+---
+'hive': patch
+---
+
+Hide unnecessary elements from header when screen is narrow

packages/web/app/src/components/get-started/trigger.tsx

@@ -2,6 +2,7 @@ import { ReactElement } from 'react';
 import { FragmentType, graphql, useFragment } from '@/gql';
 import { getDocsUrl } from '@/lib/docs-url';
 import { useToggle } from '@/lib/hooks';
+import { cn } from '@/lib/utils';
 import { GetStartedWizard } from './wizard';
 
 const GetStartedWizard_GetStartedProgress = graphql(`
@@ -17,6 +18,7 @@ const GetStartedWizard_GetStartedProgress = graphql(`
 
 export function GetStartedProgress(props: {
   tasks: FragmentType<typeof GetStartedWizard_GetStartedProgress>;
+  className?: string;
 }): ReactElement | null {
   const [isOpen, toggle] = useToggle();
   const tasks = useFragment(GetStartedWizard_GetStartedProgress, props.tasks);
@@ -38,7 +40,10 @@ export function GetStartedProgress(props: {
     <>
       <button
         onClick={toggle}
-        className="cursor-pointer rounded px-4 py-2 text-left hover:opacity-80"
+        className={cn(
+          'cursor-pointer rounded px-4 py-2 text-left hover:opacity-80',
+          props.className,
+        )}
       >
         <div className="text-sm font-medium">Get Started</div>
         <div className="text-xs text-gray-500">

packages/web/app/src/components/layouts/target.tsx

@@ -317,7 +317,7 @@ export const TargetLayout = ({
                   <Button
                     onClick={toggleModalOpen}
                     variant="link"
-                    className="whitespace-nowrap text-orange-500"
+                    className="hidden whitespace-nowrap text-orange-500 md:flex"
                   >
                     <LinkIcon size={16} className="mr-2" />
                     Connect to CDN

packages/web/app/src/components/ui/user-menu.tsx

@@ -116,7 +116,9 @@ export function UserMenu(props: {
       ) : null}
       <div className="flex flex-row items-center gap-8">
         <Changelog changes={latestChangelog} />
-        {currentOrganization ? <GetStartedProgress tasks={currentOrganization.getStarted} /> : null}
+        {currentOrganization ? (
+          <GetStartedProgress className="hidden md:block" tasks={currentOrganization.getStarted} />
+        ) : null}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <div