styles

src/components/ui/sidebar.module.css

@@ -24,8 +24,7 @@
   display: flex;
   margin-top: 2rem;
 
-  @media (min-width: em(250px)) {
-    margin-top: 0;
+  @media (max-width: em(600px)) {
     align-items: center;
 
     > .Menu {

src/components/ui/sidebar.tsx

@@ -27,7 +27,7 @@ export function Sidebar({ categories, activeCategory, selectCategory }: SidebarP
 
   return (
     <div className={`${style.Sidebar} ${isInitialLoading ? style.Loading : ''}`}>
-      <Box visibleFrom="md">
+      <Box visibleFrom="sm" style={{ flexGrow: 1 }} w="100%">
         <WeatherWidget />
       </Box>
       <div className={style.MenuWrapper}>

src/components/widgets/weather-widget.module.css

@@ -1,6 +1,4 @@
 .Weather {
-  flex-grow: 1;
-  width: 100%;
   height: 200px;
   padding: 30px;
   display: flex;

src/pages/index-page.tsx

@@ -6,14 +6,13 @@ import { getRandomBackground } from '~/api/unsplash';
 import { backgroundsAtom, onNextBackgroundAtom, settingsAtom } from '~/atoms';
 import { AppList } from '~/components/apps/app-list';
 import { Sidebar } from '~/components/ui/sidebar';
+import { CurrentImageWidget } from '~/components/widgets/current-image-widget';
 import { DateWidget } from '~/components/widgets/date-widget';
 import { SearchWidget } from '~/components/widgets/search-widget';
 import { BACKGROUND_FETCH_MINS } from '~/config';
 import { useActiveCategory } from '~/lib/use-active-category';
 import { Background } from '~/types';
 
-import { CurrentImageWidget } from '~/components/widgets/current-image-widget';
-import { WeatherWidget } from '~/components/widgets/weather-widget';
 import style from './index-page.module.css';
 
 export function IndexPage() {