fix: Make the navigation height consistent to fix responsiveness

https://harperdb.atlassian.net/browse/STUDIO-604

Author: dawsontoth

src/components/SubNavMenu.tsx

@@ -3,8 +3,8 @@ import { ReactNode } from 'react';
 
 export function SubNavMenu({ children }: { children?: ReactNode }) {
 	return (
-		<nav className="fixed top-20 w-full md:h-12 z-39 py-2 px-4 md:px-12 bg-grey-700">
-			<div className="md:flex items-center h-full space-x-8">
+		<nav className="fixed top-20 w-full h-12 z-39 py-2 px-4 md:px-12 bg-grey-700">
+			<div className="flex items-center h-full space-x-2">
 				<Breadcrumbs />
 				{children}
 			</div>

src/features/clusters/ClustersList.tsx

@@ -55,7 +55,7 @@ export function ClustersList() {
 					<div className="flex w-full justify-end gap-2">
 						<Input
 							placeholder="Filter by name"
-							className="inline-block w-48 md:w-64 bg-black border"
+							className="inline-block w-full text-xs"
 							value={filterByNameValue}
 							onChange={onFilterByNameChanged}
 						/>
@@ -64,20 +64,19 @@ export function ClustersList() {
 							<Link to="new-cluster">
 								<Button
 									variant="positive"
-									className="w-full rounded-full md:w-44"
 									accessKey="n"
 								>
 									<Plus />{' '}
-									<span>
-										<u>N</u>ew Cluster
+									<span className="hidden sm:inline-block">
+										<u>N</u>ew <span className="hidden md:inline-block">Cluster</span>
 									</span>
 								</Button>
 							</Link>
 						)}
 					</div>
 				) : null}
 			</SubNavMenu>
-			<section className="mt-40 md:mt-32 px-4 pt-4 md:px-12 min-h-[calc(100vh-theme(spacing.32))]">
+			<section className="mt-32 px-4 pt-4 md:px-12 min-h-[calc(100vh-theme(spacing.32))]">
 				<div className="grid grid-cols-1 gap-4 md:grid-cols-12 mb-4">
 					{filteredClusters.map((cluster) => (
 						<div key={cluster.id} className="col-span-1 md:col-span-4 lg:col-span-3 2xl:col-span-2">

src/features/instance/InstanceLayout.tsx

@@ -4,7 +4,7 @@ import { Outlet } from '@tanstack/react-router';
 export function InstanceLayout() {
 	return (
 		<>
-			<nav className="fixed top-20 w-full z-39 md:px-12 md:py-1 bg-grey-700">
+			<nav className="fixed top-20 w-full z-39 h-12 md:px-12 bg-grey-700">
 				<InstanceNavBar />
 			</nav>
 			<div className="mt-32 min-h-[calc(100vh-theme(spacing.32))]">

src/features/instance/InstanceNavBar.tsx

@@ -111,7 +111,7 @@ function DesktopInstanceNavBar({ links, restartRequired }: { links: Link[], rest
 function MobileInstanceNavBar({ links, restartRequired }: { links: Link[], restartRequired: boolean }) {
 	return (
 		<>
-			<div className="flex md:hidden items-center justify-between p-2 text-white">
+			<div className="flex md:hidden items-center justify-between h-full px-2 text-white">
 				<Breadcrumbs restartRequired={restartRequired} />
 				<DropdownMenu>
 					<DropdownMenuTrigger asChild>

src/features/instance/applications/index.tsx

@@ -24,10 +24,14 @@ export function ApplicationsEditor() {
 				<ApplicationsSidebar />
 			</aside>
 
-			<div className={cx('applications-content overflow-y-auto overflow-x-hidden fixed bottom-0 right-0 left-0' +
-				' md:left-56' +
-				' transition-[left]' +
-				' h-[calc(100vh-theme(spacing.32))]', toggled && 'sm:left-56')}>
+			<div className={cx(
+				'applications-content',
+				'overflow-y-auto overflow-x-hidden',
+				'fixed top-32 right-0 bottom-0 left-0',
+				'transition-[left]',
+				'md:left-56',
+				toggled && 'sm:left-56',
+			)}>
 				<ContentViewer />
 				<ContentActions toggledSidebar={toggled} toggleSidebar={toggle} />
 			</div>

src/features/organization/billing/index.tsx

@@ -14,7 +14,7 @@ export function OrgBillingIndex() {
 
 	if (!update) {
 		return (
-			<div className="mt-40 md:mt-32 px-4 pt-4 md:px-12 min-h-[calc(100vh-theme(spacing.32))]">
+			<div className="mt-32 px-4 pt-4 md:px-12 min-h-[calc(100vh-theme(spacing.32))]">
 				You don't have access to manage payments for this organization. Please contact your administrator.
 			</div>
 		);
@@ -23,7 +23,7 @@ export function OrgBillingIndex() {
 	return (
 		<>
 			<SubNavMenu />
-			<div className="mt-40 md:mt-32 px-4 pt-4 md:px-12 min-h-[calc(100vh-theme(spacing.32))]">
+			<div className="mt-32 px-4 pt-4 md:px-12 min-h-[calc(100vh-theme(spacing.32))]">
 				<div className="md:grid gap-4 md:grid-cols-12 min-h-[calc(100vh-theme(spacing.36))] mb-12">
 					<section className="col-span-1 text-white md:col-span-4 lg:col-span-3 md:border-r-1 border-b md:border-b-0 md:pr-4 border-gray-700">
 						<DesktopBillingNavBar />

src/features/organizations/NewOrg.tsx

@@ -5,7 +5,7 @@ export function NewOrg() {
 	return (
 		<>
 			<SubNavMenu />
-			<section className="mt-40 md:mt-32 px-4 pt-4 md:px-12 min-h-[calc(100vh-theme(spacing.32))]">
+			<section className="mt-32 px-4 pt-4 md:px-12 min-h-[calc(100vh-theme(spacing.32))]">
 				<NewOrgForm />
 			</section>
 		</>

src/features/organizations/index.tsx

@@ -90,18 +90,19 @@ export function OrganizationsIndex() {
 				<div className="flex w-full justify-end gap-2">
 					<Input
 						placeholder="Filter by name"
-						className="inline-block w-48 md:w-64 bg-black border"
+						className="inline-block w-full text-xs"
 						value={filterByNameValue}
 						onChange={onFilterByNameChanged}
 					/>
 					<Link to="/new-org">
-						<Button variant="positive" className="rounded-full w-44" accessKey="n">
-							<PlusIcon /> <span><u>N</u>ew Organization</span>
+						<Button variant="positive" accessKey="n">
+							<PlusIcon />
+							<span className="hidden sm:inline-block"><u>N</u>ew <span className="hidden md:inline-block">Organization</span></span>
 						</Button>
 					</Link>
 				</div>
 			</SubNavMenu>
-			<section className="mt-40 md:mt-32 px-4 pt-4 md:px-12 min-h-[calc(100vh-theme(spacing.32))]">
+			<section className="mt-32 px-4 pt-4 md:px-12 min-h-[calc(100vh-theme(spacing.32))]">
 				<div className="grid grid-cols-1 gap-4 md:grid-cols-12">
 					{organizationRoles.map((organizationRole) => (
 						<div