tweak widget layouts for mobile

src/components/widgets/resources/cpu.jsx

@@ -14,7 +14,7 @@ export default function Cpu() {
 
   if (error || data?.error) {
     return (
-      <div className="flex-none flex flex-row items-center justify-center">
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
         <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
         <div className="flex flex-col ml-3 text-left">
           <span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
@@ -25,7 +25,7 @@ export default function Cpu() {
 
   if (!data) {
     return (
-      <div className="flex-none flex flex-row items-center justify-center">
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
         <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
         <div className="flex flex-col ml-3 text-left">
           <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
@@ -37,11 +37,12 @@ export default function Cpu() {
   const percent = data.cpu.usage;
 
   return (
-    <div className="flex-none flex flex-row items-center justify-center">
+    <div className="flex-none flex flex-row items-center mr-3 py-1.5">
       <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-      <div className="flex flex-col ml-3 text-left font-mono min-w-[50px]">
+      <div className="flex flex-col ml-3 text-left font-mono min-w-[80px]">
         <div className="text-theme-800 dark:text-theme-200 text-xs">
-          {t("common.number", { value: data.cpu.usage, style: "unit", unit: "percent", maximumFractionDigits: 0 })}
+          {t("common.number", { value: data.cpu.usage, style: "unit", unit: "percent", maximumFractionDigits: 0 })}{" "}
+          {t("docker.cpu")}
         </div>
         <UsageBar percent={percent} />
       </div>

src/components/widgets/resources/disk.jsx

@@ -14,7 +14,7 @@ export default function Disk({ options }) {
 
   if (error || data?.error) {
     return (
-      <div className="flex-none flex flex-row items-center justify-center">
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
         <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
         <div className="flex flex-col ml-3 text-left">
           <span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
@@ -25,7 +25,7 @@ export default function Disk({ options }) {
 
   if (!data) {
     return (
-      <div className="flex-none flex flex-row items-center justify-center">
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
         <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
         <div className="flex flex-col ml-3 text-left">
           <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
@@ -37,7 +37,7 @@ export default function Disk({ options }) {
   const percent = Math.round((data.drive.usedGb / data.drive.totalGb) * 100);
 
   return (
-    <div className="flex-none flex flex-row items-center justify-center group">
+    <div className="flex-none flex flex-row items-center mr-3 py-1.5 group">
       <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
       <div className="flex flex-col ml-3 text-left min-w-[80px]">
         <span className="text-theme-800 dark:text-theme-200 text-xs group-hover:hidden">

src/components/widgets/resources/memory.jsx

@@ -14,7 +14,7 @@ export default function Memory() {
 
   if (error || data?.error) {
     return (
-      <div className="flex-none flex flex-row items-center justify-center">
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
         <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
         <div className="flex flex-col ml-3 text-left">
           <span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
@@ -25,7 +25,7 @@ export default function Memory() {
 
   if (!data) {
     return (
-      <div className="flex-none flex flex-row items-center justify-center">
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
         <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
         <div className="flex flex-col ml-3 text-left">
           <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
@@ -37,7 +37,7 @@ export default function Memory() {
   const percent = Math.round((data.memory.usedMemMb / data.memory.totalMemMb) * 100);
 
   return (
-    <div className="flex-none flex flex-row items-center justify-center group">
+    <div className="flex-none flex flex-row items-center mr-3 py-1.5 group">
       <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
       <div className="flex flex-col ml-3 text-left min-w-[80px]">
         <span className="text-theme-800 dark:text-theme-200 text-xs group-hover:hidden">

src/components/widgets/resources/resources.jsx

@@ -4,8 +4,8 @@ import Memory from "./memory";
 
 export default function Resources({ options }) {
   return (
-    <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">
+    <div className="flex flex-col max-w:full sm:basis-auto self-center m-auto flex-wrap">
+      <div className="flex flex-row self-center flex-wrap justify-between">
         {options.cpu && <Cpu />}
         {options.memory && <Memory />}
         {Array.isArray(options.disk)

src/components/widgets/search/search.jsx

@@ -51,7 +51,7 @@ export default function Search({ options }) {
   }
 
   return (
-    <form className="flex-col relative h-8 my-4 min-w-full md:min-w-fit grow" onSubmit={handleSubmit}>
+    <form className="flex-col relative h-8 my-4 min-w-full md:min-w-fit grow mr-4" onSubmit={handleSubmit}>
       <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" />
       <input
         type="text"

src/pages/index.jsx

@@ -49,7 +49,7 @@ export default function Home({ settings }) {
         </Head>
         <div className="fixed w-full h-full m-0 p-0" style={wrappedStyle} />
         <div className="relative w-full container m-auto flex flex-col h-screen 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">
+          <div className="flex flex-row flex-wrap m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200 justify-between">
             {widgets && (
               <>
                 {widgets
@@ -58,7 +58,7 @@ export default function Home({ settings }) {
                     <Widget key={i} widget={widget} />
                   ))}
 
-                <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">
+                <div className="ml-4 flex flex-wrap basis-full grow sm:basis-auto justify-between md:justify-end mt-2 md:mt-0">
                   {widgets
                     .filter((widget) => rightAlignedWidgets.includes(widget.type))
                     .map((widget, i) => (