Fix: correct iconsOnly bookmark group spacing (#4502)

docs/widgets/services/beszel.md

@@ -7,7 +7,7 @@ Learn more about [Beszel](https://github.com/henrygd/beszel)
 
 The widget has two modes, a single system with detailed info if `systemId` is provided, or an overview of all systems if `systemId` is not provided.
 
-The `systemID` in the `id` field on the collections page of Beszel.
+The `systemID` is the `id` field on the collections page of Beszel under the PocketBase admin panel. You can also use the 'nice name' from the Beszel UI.
 
 Allowed fields for 'overview' mode: `["systems", "up"]`
 Allowed fields for a single system: `["name", "status", "updated", "cpu", "memory", "disk", "network"]`

src/components/bookmarks/group.jsx

@@ -24,9 +24,9 @@ export default function BookmarksGroup({
     <div
       key={bookmarks.name}
       className={classNames(
-        "bookmark-group",
+        "bookmark-group flex-1 overflow-hidden",
         layout?.style === "row" ? "basis-full" : "basis-full md:basis-1/4 lg:basis-1/5 xl:basis-1/6",
-        layout?.header === false ? "flex-1 px-1 -my-1 overflow-hidden" : "flex-1 p-1 overflow-hidden",
+        layout?.header === false ? "px-1" : "p-1 pb-0",
       )}
     >
       <Disclosure defaultOpen={!(layout?.initiallyCollapsed ?? groupsInitiallyCollapsed) ?? true}>

src/components/bookmarks/list.jsx

@@ -5,15 +5,14 @@ import { columnMap } from "../../utils/layout/columns";
 import Item from "components/bookmarks/item";
 
 export default function List({ bookmarks, layout, bookmarksStyle }) {
-  let classes =
-    layout?.style === "row" ? `grid ${columnMap[layout?.columns]} gap-x-2` : "flex flex-col mt-3 bookmark-list";
+  let classes = layout?.style === "row" ? `grid ${columnMap[layout?.columns]} gap-x-2` : "flex flex-col bookmark-list";
   const style = {};
   if (layout?.iconsOnly || bookmarksStyle === "icons") {
-    classes = "grid gap-3 mt-3 bookmark-list";
+    classes = "grid gap-2 bookmark-list";
     style.gridTemplateColumns = "repeat(auto-fill, minmax(60px, 1fr))";
   }
   return (
-    <ul className={classNames(classes)} style={style}>
+    <ul className={classNames(classes, "mb-2", layout?.header === false ? "" : "mt-3")} style={style}>
       {bookmarks.map((bookmark) => (
         <Item
           key={`${bookmark.name}-${bookmark.href}`}

src/widgets/beszel/component.jsx

@@ -20,8 +20,20 @@ export default function Component({ service }) {
     widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
   }
 
-  if (systemsError) {
-    return <Container service={service} error={systemsError} />;
+  let system = null;
+  let finalError = systemsError;
+
+  if (systems && !systems.items) {
+    finalError = { message: "No items returned from beszel API" };
+  } else if (systems && systems.items && systemId) {
+    system = systems.items.find((item) => item.id === systemId || item.name === systemId);
+    if (!system) {
+      finalError = { message: `System with id ${systemId} not found` };
+    }
+  }
+
+  if (finalError) {
+    return <Container service={service} error={finalError} />;
   }
 
   if (!systems) {
@@ -33,9 +45,7 @@ export default function Component({ service }) {
     );
   }
 
-  if (systemId) {
-    const system = systems.items.find((item) => item.id === systemId);
-
+  if (system) {
     return (
       <Container service={service}>
         <Block label="beszel.name" value={system.name} />

src/widgets/beszel/proxy.js

@@ -59,7 +59,7 @@ export default async function beszelProxyHandler(req, res) {
       if (!token) {
         [status, token] = await login(loginUrl, widget.username, widget.password, service);
         if (status !== 200) {
-          logger.debug(`HTTP ${status} logging into Beszel: ${token}`);
+          logger.debug(`HTTP ${status} logging into Beszel: ${JSON.stringify(token)}`);
           return res.status(status).send(token);
         }
       }
@@ -72,13 +72,13 @@ export default async function beszelProxyHandler(req, res) {
         },
       });
 
-      if (status === 403) {
+      if ([400, 403].includes(status)) {
         logger.debug(`HTTP ${status} retrieving data from Beszel, logging in and trying again.`);
         cache.del(`${tokenCacheKey}.${service}`);
         [status, token] = await login(loginUrl, widget.username, widget.password, service);
 
         if (status !== 200) {
-          logger.debug(`HTTP ${status} logging into Beszel: ${data}`);
+          logger.debug(`HTTP ${status} logging into Beszel: ${JSON.stringify(data)}`);
           return res.status(status).send(data);
         }
 

src/widgets/glances/metrics/containers.jsx

@@ -38,10 +38,16 @@ export default function Component({ service }) {
   }
 
   data.splice(chart ? 5 : 1);
+  let headerYPosition = "top-4";
+  let listYPosition = "bottom-4";
+  if (chart) {
+    headerYPosition = "-top-6";
+    listYPosition = "-top-3";
+  }
 
   return (
     <Container chart={chart}>
-      <Block position="top-4 right-3 left-3">
+      <Block position={`${headerYPosition} right-3 left-3`}>
         <div className="flex items-center text-xs">
           <div className="grow" />
           <div className="w-14 text-right italic">{t("resources.cpu")}</div>
@@ -49,7 +55,7 @@ export default function Component({ service }) {
         </div>
       </Block>
 
-      <Block position="bottom-4 right-3 left-3">
+      <Block position={`${listYPosition} right-3 left-3`}>
         <div className="pointer-events-none text-theme-900 dark:text-theme-200">
           {data.map((item) => (
             <div key={item[idKey]} className="text-[0.75rem] h-[0.8rem]">