From 00a31c63664bee41f2291e947c1cc92cf91dc260 Mon Sep 17 00:00:00 2001
From: Francis Cao <franciscao@gmail.com>
Date: Thu, 12 Mar 2026 11:51:20 -0700
Subject: [PATCH] fix globe fallback, fix freeform bug

---
 src/app/(main)/boards/BoardEntityBadge.tsx    | 20 +++++++++++---
 .../boards/[boardId]/BoardViewColumn.tsx      | 26 +++++++++----------
 2 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/app/(main)/boards/BoardEntityBadge.tsx b/src/app/(main)/boards/BoardEntityBadge.tsx
index c5b476ff9..3a3e1d554 100644
--- a/src/app/(main)/boards/BoardEntityBadge.tsx
+++ b/src/app/(main)/boards/BoardEntityBadge.tsx
@@ -1,17 +1,31 @@
 import { Icon, Row, Text } from '@umami/react-zen';
 import { useState } from 'react';
-import { Favicon } from '@/components/common/Favicon';
 import { Globe, Grid2x2, Link } from '@/components/icons';
 import type { BoardEntityType } from '@/lib/boards';
 
+const HOSTNAME_REGEX = /^(?:https?:\/\/)?(?:[^@\n]+@)?([^:/\n?=]+)/im;
+
 function WebsiteIcon({ domain }: { domain?: string }) {
   const [failed, setFailed] = useState(false);
 
   if (domain && !failed) {
-    return <Favicon domain={domain} onError={() => setFailed(true)} />;
+    const match = domain.match(HOSTNAME_REGEX);
+    const hostname = match?.[1];
+
+    if (hostname) {
+      return (
+        <img
+          src={`https://${hostname}/favicon.ico`}
+          width={16}
+          height={16}
+          alt=""
+          onError={() => setFailed(true)}
+        />
+      );
+    }
   }
 
-  return <Globe />;
+  return <Globe width={16} height={16} />;
 }
 
 export function BoardEntityBadge({
diff --git a/src/app/(main)/boards/[boardId]/BoardViewColumn.tsx b/src/app/(main)/boards/[boardId]/BoardViewColumn.tsx
index 572fe9d2e..580209442 100644
--- a/src/app/(main)/boards/[boardId]/BoardViewColumn.tsx
+++ b/src/app/(main)/boards/[boardId]/BoardViewColumn.tsx
@@ -1,4 +1,4 @@
-import { Box, Column, Row } from '@umami/react-zen';
+import { Column, Heading, Row, Text } from '@umami/react-zen';
 import { Panel } from '@/components/common/Panel';
 import { useBoard } from '@/components/hooks';
 import { getBoardType, getResolvedComponentEntity, isOpenBoardType } from '@/lib/boards';
@@ -31,22 +31,20 @@ export function BoardViewColumn({
   const showBadge = showEntityBadge && isOpenBoardType(boardType) && !!entityBadge;
 
   return (
-    <Panel title={title} description={description} height="100%" position="relative">
-      {showBadge && (
-        title ? (
-          <Box position="absolute" top="12px" right="12px" zIndex={100}>
-            <BoardEntityBadge {...entityBadge} />
-          </Box>
-        ) : (
-          <Row justifyContent="flex-end">
-            <BoardEntityBadge {...entityBadge} />
-          </Row>
-        )
+    <Panel height="100%">
+      {showBadge ? (
+        <Row justifyContent={title ? 'space-between' : 'flex-end'} alignItems="center">
+          {title && <Heading>{title}</Heading>}
+          <BoardEntityBadge {...entityBadge} />
+        </Row>
+      ) : (
+        title && <Heading>{title}</Heading>
       )}
+      {description && <Text color="muted">{description}</Text>}
       <Column width="100%" height="100%" style={{ minHeight: 0 }}>
-        <Box width="100%" flexGrow={1} style={{ minHeight: 0 }}>
+        <Column width="100%" flexGrow={1} style={{ minHeight: 0 }}>
           <BoardComponentRenderer config={component} websiteId={entityId} />
-        </Box>
+        </Column>
       </Column>
     </Panel>
   );