tweak mobile layouts for widgets

src/components/widgets/openweathermap/weather.jsx

@@ -33,7 +33,7 @@ export default function OpenWeatherMap({ options }) {
   }
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col justify-center">
       <div className="flex flex-row items-center justify-end">
         <div className="flex flex-col items-center">
           <Icon

src/components/widgets/resources/resources.jsx

@@ -5,11 +5,11 @@ import Memory from "./memory";
 export default function Resources({ options }) {
   return (
     <>
-      <div className="pr-2 flex flex-col max-w:full overflow-y-scroll">
-        <div className="flex flex-row space-x-4">
-          {options.disk && <Disk options={options} />}
+      <div className="flex flex-col max-w:full basis-1/2 sm:basis-auto self-center">
+        <div className="flex flex-row space-x-4 self-center">
           {options.cpu && <Cpu />}
           {options.memory && <Memory />}
+          {options.disk && <Disk options={options} />}
         </div>
         {options.label && (
           <div className="border-t-2 border-theme-800 dark:border-theme-200 mt-1 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">

src/components/widgets/weather/weather.jsx

@@ -33,7 +33,7 @@ export default function WeatherApi({ options }) {
   }
 
   return (
-    <div className="flex flex-col justify-center md:justify-start mt-2 lg:mt-0 !-ml-1 lg:!ml-2">
+    <div className="flex flex-col justify-center">
       <div className="flex flex-row items-center justify-end">
         <div className="flex flex-col items-center">
           <Icon condition={data.current.condition.code} timeOfDay={data.current.is_day ? "day" : "night"} />

src/pages/index.js

@@ -19,6 +19,7 @@ const ColorToggle = dynamic(() => import("components/color-toggle"), {
 });
 
 const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather", "search"];
+const expandedWidgets = ["search"];
 
 export default function Home() {
   const { data: services, error: servicesError } = useSWR("/api/services");
@@ -32,7 +33,7 @@ export default function Home() {
           <title>Welcome</title>
         </Head>
         <div className="w-full container m-auto flex flex-col h-screen justify-between">
-          <div className="flex flex-wrap space-x-4 m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200 justify-between">
+          <div className="flex flex-row flex-wrap space-x-0 sm:space-x-4 m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200 justify-between md:justify-start">
             {widgets && (
               <>
                 {widgets
@@ -40,21 +41,14 @@ export default function Home() {
                   .map((widget, i) => (
                     <Widget key={i} widget={widget} />
                   ))}
-                {widgets
-                  .filter((widget) => widget.type === "search")
-                  .map(
-                    (widget, i) =>
-                      <Search options={widget.options} classN={"hidden sm:block"} /> ?? <div className="grow"></div>
-                  )}
-                {widgets
-                  .filter((widget) => rightAlignedWidgets.includes(widget.type))
-                  .map((widget, i) =>
-                    widget.type === "search" ? (
-                      <Search options={widget.options} classN={"block sm:hidden !ml-0 sm:!ml-1"} />
-                    ) : (
+
+                <div className="flex flex-wrap basis-full space-x-0 sm:space-x-4 grow sm:basis-auto justify-between md:justify-end mt-2 md:mt-0">
+                  {widgets
+                    .filter((widget) => rightAlignedWidgets.includes(widget.type))
+                    .map((widget, i) => (
                       <Widget key={i} widget={widget} />
-                    )
-                  )}
+                    ))}
+                </div>
               </>
             )}
           </div>