Center, don't take up full width

Michigan-Tech-Courses · Apr 21, 2024 · 1349dd1 · 1349dd1
1 parent f4745e5
commit 1349dd1
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 32 deletions.
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
@@ -62,43 +62,45 @@ const Navbar = observer(() => {
 
 	return (
 		<Flex align='center' justify='space-between' wrap='wrap' p={4} as='nav' mb={8}>
-			<Box width='40px' height='40px' borderRadius='full' overflow='hidden' mr={5}>
-				<Logo/>
-			</Box>
-
-			<Box display={{base: 'block', md: 'none'}} ml='auto' onClick={handleToggle}>
-				<IconButton aria-label={isOpen ? 'Close navbar' : 'Open navbar'}>
-					{isOpen ? <CloseIcon/> : <HamburgerIcon/>}
-				</IconButton>
-			</Box>
-
-			<Box
-				display={{base: isOpen ? 'block' : 'none', md: 'flex'}}
-				width={{base: 'full', md: 'auto'}}
-				alignItems='center'
-			>
-				{
-					PAGES.map(page => (
-						<Link
-							key={page.href}
-							href={page.href}
-							display='block'
-							mr={page.href === PAGES.at(-1).href ? '0' : '6'}
-							mt={{base: 4, md: 0}}
-							color='inherit'
-						>
-							{page.label}
-						</Link>
-					))
-				}
-			</Box>
+			<Flex flex={{lg: 1}}>
+				<Box width='40px' height='40px' borderRadius='full' overflow='hidden' mr={5}>
+					<Logo/>
+				</Box>
+
+				<Box display={{base: 'block', md: 'none'}} ml='auto' onClick={handleToggle}>
+					<IconButton aria-label={isOpen ? 'Close navbar' : 'Open navbar'}>
+						{isOpen ? <CloseIcon/> : <HamburgerIcon/>}
+					</IconButton>
+				</Box>
+
+				<Box
+					display={{base: isOpen ? 'block' : 'none', md: 'flex'}}
+					width={{base: 'full', md: 'auto'}}
+					alignItems='center'
+				>
+					{
+						PAGES.map(page => (
+							<Link
+								key={page.href}
+								href={page.href}
+								display='block'
+								mr={page.href === PAGES.at(-1)?.href ? '0' : '6'}
+								mt={{base: 4, md: 0}}
+								color='inherit'
+							>
+								{page.label}
+							</Link>
+						))
+					}
+				</Box>
+			</Flex>
 
 			<Box
 				display={{base: isOpen ? 'block' : 'none', md: 'flex'}}
 				width={{base: 'full', md: 'auto'}}
 				mt={{base: 4, md: 0}}
 				alignItems='center'
-				flexGrow={1}
+				flex={{lg: 1}}
 			>
 				{
 					shouldShowCourseSearch && (
@@ -121,6 +123,8 @@ const Navbar = observer(() => {
 
 			<HStack
 				display={{base: isOpen ? 'flex' : 'none', md: 'flex'}}
+				flex={{lg: 1}}
+				justifyContent='end'
 				mt={{base: 4, md: 0}}
 			>
 

diff --git a/src/components/search-bar/default.tsx b/src/components/search-bar/default.tsx
@@ -58,7 +58,7 @@ const DefaultSearchBar = observer((props: SearchBarProps) => {
 	}, []);
 
 	return (
-		<Container ref={props.innerRef} maxW='100%'>
+		<Container ref={props.innerRef}>
 			<InputGroup boxShadow='md' borderRadius='md' size='lg'>
 				<InputLeftElement pointerEvents='none'>
 					<Search2Icon color='gray.300'/>