use-weather-forecast 0.1.207 → 0.1.209

package/dist/index.cjs

@@ -1263,33 +1263,40 @@ var styles = {
   hourCard: { minWidth: 72, textAlign: "center", padding: 8, borderRadius: 8, background: "#f9fafb" },
   dayRow: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, padding: "8px 0", borderBottom: "1px solid #f3f4f6" },
   // Fluid: fills whatever container it is dropped into (e.g. the full
-  // sidebar/column width on desktop), with generous, even padding. Current
-  // conditions sit on the left and the upcoming days on the right; the two
-  // halves wrap into a stack when the container gets narrow.
+  // sidebar/column width on desktop). Current conditions sit on the left and
+  // the upcoming days on the right; the two halves wrap into a stack when the
+  // container gets narrow.
+  //
+  // The card is deliberately **short**: on the homepage it sits under the
+  // trending-news widget and above the chat input, and every pixel it takes is
+  // one the input box loses on a laptop screen. Padding, the gap between its
+  // two rows and the two display sizes (temperature and clock) are what set
+  // its height — raising any of them pushes the input below the fold, so
+  // prefer trimming content over growing the card.
   compactRoot: {
     fontFamily: "system-ui, sans-serif",
     display: "flex",
     flexDirection: "row",
     flexWrap: "wrap",
-    alignItems: "stretch",
-    gap: 24,
-    padding: "20px 24px",
+    alignItems: "center",
+    gap: 20,
+    padding: "12px 16px",
     borderRadius: 16,
     width: "100%",
     boxSizing: "border-box"
   },
-  // Current conditions form two spread-out rows down the left side of the
-  // card (rather than five stacked lines), so the card stays short and each
-  // row uses the full available width.
-  compactBody: { display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 20, flex: "1.6 1 240px", minWidth: 0 },
-  compactRow: { display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: "12px 16px" },
-  compactCity: { fontSize: 15, fontWeight: 700, lineHeight: 1.2 },
-  compactHeader: { display: "flex", alignItems: "center", flexWrap: "wrap", gap: 12 },
-  compactTemp: { fontSize: 32, fontWeight: 600, lineHeight: 1 },
-  compactTime: { fontSize: 26, fontWeight: 600, lineHeight: 1.1 },
-  compactSeconds: { fontSize: 13, fontWeight: 500, opacity: 0.6, marginLeft: 2 },
-  compactDate: { fontSize: 11, opacity: 0.7, marginTop: 5 },
-  compactStats: { display: "flex", flexWrap: "wrap", gap: "8px 18px", fontSize: 12, opacity: 0.9 },
+  // Current conditions form two rows down the left side of the card (rather
+  // than five stacked lines), so the card stays short and each row uses the
+  // full available width.
+  compactBody: { display: "flex", flexDirection: "column", justifyContent: "center", gap: 8, flex: "1.6 1 240px", minWidth: 0 },
+  compactRow: { display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: "6px 16px" },
+  compactCity: { fontSize: 14, fontWeight: 700, lineHeight: 1.2 },
+  compactHeader: { display: "flex", alignItems: "center", flexWrap: "wrap", gap: 10 },
+  compactTemp: { fontSize: 26, fontWeight: 600, lineHeight: 1 },
+  compactTime: { fontSize: 20, fontWeight: 600, lineHeight: 1.1 },
+  compactSeconds: { fontSize: 12, fontWeight: 500, opacity: 0.6, marginLeft: 2 },
+  compactDate: { fontSize: 11, opacity: 0.7, marginTop: 2 },
+  compactStats: { display: "flex", flexWrap: "wrap", gap: "4px 16px", fontSize: 12, opacity: 0.9 },
   // Three equal columns on the right side of the card, each stacking
   // weekday / icon / high-low, vertically centered against the current
   // conditions and nudged over behind a divider so the two halves read as
@@ -1298,15 +1305,15 @@ var styles = {
     display: "grid",
     gridTemplateColumns: "repeat(3, 1fr)",
     alignContent: "center",
-    gap: 14,
+    gap: 10,
     flex: "1 1 190px",
     minWidth: 0,
-    paddingLeft: 22,
+    paddingLeft: 18,
     borderLeft: "1px solid currentColor",
     borderLeftColor: "rgba(128,128,128,0.25)",
     fontSize: 11
   },
-  upcomingDay: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 5, textAlign: "center" },
+  upcomingDay: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 3, textAlign: "center" },
   upcomingDayName: { opacity: 0.7, whiteSpace: "nowrap" },
   upcomingTemps: { whiteSpace: "nowrap" },
   compactStat: { display: "flex", alignItems: "center", gap: 6, whiteSpace: "nowrap" },
@@ -1380,9 +1387,9 @@ function SingleWeatherForecast(props) {
             data.location?.region ? `, ${data.location.region}` : ""
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.compactHeader, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WeatherIcon, { condition: data.current.icon, width: 30, height: 30, title: "Current weather" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WeatherIcon, { condition: data.current.icon, width: 26, height: 26, title: "Current weather" }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { style: styles.compactTemp, children: data.current.temperature }),
-            renderUnitSwitch(13)
+            renderUnitSwitch(12)
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.compactRow, children: [