From 5c9f67c7e9f4847d6837b25608907bee8d3207c7 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Sat, 15 Mar 2025 11:37:09 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Titlebar/index.tsx             |  2 +-
 src/pages/primary/NoteListPage/FeedButton.tsx | 13 +++++++------
 src/pages/primary/NoteListPage/index.tsx      |  4 ++--
 src/pages/secondary/ProfilePage/index.tsx     | 10 +++++++---
 4 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/Titlebar/index.tsx b/src/components/Titlebar/index.tsx
index 0636896c..60b4dfbf 100644
--- a/src/components/Titlebar/index.tsx
+++ b/src/components/Titlebar/index.tsx
@@ -10,7 +10,7 @@ export function Titlebar({
   return (
     <div
       className={cn(
-        'sticky top-0 w-full h-12 z-40 bg-background [&_svg]:size-5 [&_svg]:shrink-0',
+        'sticky top-0 w-full h-12 z-40 bg-background [&_svg]:size-5 [&_svg]:shrink-0 select-none',
         className
       )}
     >
diff --git a/src/pages/primary/NoteListPage/FeedButton.tsx b/src/pages/primary/NoteListPage/FeedButton.tsx
index 6ae32a4e..962f9e95 100644
--- a/src/pages/primary/NoteListPage/FeedButton.tsx
+++ b/src/pages/primary/NoteListPage/FeedButton.tsx
@@ -2,6 +2,7 @@ import FeedSwitcher from '@/components/FeedSwitcher'
 import { Drawer, DrawerContent } from '@/components/ui/drawer'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { simplifyUrl } from '@/lib/url'
+import { cn } from '@/lib/utils'
 import { useFeed } from '@/providers/FeedProvider'
 import { useRelaySets } from '@/providers/RelaySetsProvider'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
@@ -9,14 +10,14 @@ import { ChevronDown, Server, UsersRound } from 'lucide-react'
 import { forwardRef, HTMLAttributes, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-export default function FeedButton() {
+export default function FeedButton({ className }: { className?: string }) {
   const { isSmallScreen } = useScreenSize()
   const [open, setOpen] = useState(false)
 
   if (isSmallScreen) {
     return (
       <>
-        <FeedSwitcherTrigger onClick={() => setOpen(true)} />
+        <FeedSwitcherTrigger className={className} onClick={() => setOpen(true)} />
         <Drawer open={open} onOpenChange={setOpen}>
           <DrawerContent className="max-h-[80vh]">
             <div className="p-4 overflow-auto">
@@ -31,7 +32,7 @@ export default function FeedButton() {
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        <FeedSwitcherTrigger />
+        <FeedSwitcherTrigger className={className} />
       </PopoverTrigger>
       <PopoverContent side="bottom" className="w-96 p-4 max-h-[80vh] overflow-auto">
         <FeedSwitcher close={() => setOpen(false)} />
@@ -41,7 +42,7 @@ export default function FeedButton() {
 }
 
 const FeedSwitcherTrigger = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  (props, ref) => {
+  ({ className, ...props }, ref) => {
     const { t } = useTranslation()
     const { feedType, relayUrls, activeRelaySetId } = useFeed()
     const { relaySets } = useRelaySets()
@@ -61,12 +62,12 @@ const FeedSwitcherTrigger = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEle
 
     return (
       <div
-        className="flex items-center gap-2 clickable px-3 h-full rounded-lg"
+        className={cn('flex items-center gap-2 clickable px-3 h-full rounded-lg', className)}
         ref={ref}
         {...props}
       >
         {feedType === 'following' ? <UsersRound /> : <Server />}
-        <div className="text-lg font-semibold">{title}</div>
+        <div className="text-lg font-semibold truncate">{title}</div>
         <ChevronDown />
       </div>
     )
diff --git a/src/pages/primary/NoteListPage/index.tsx b/src/pages/primary/NoteListPage/index.tsx
index 81e121ce..9b098809 100644
--- a/src/pages/primary/NoteListPage/index.tsx
+++ b/src/pages/primary/NoteListPage/index.tsx
@@ -66,8 +66,8 @@ function NoteListPageTitlebar({ temporaryRelayUrls = [] }: { temporaryRelayUrls?
 
   return (
     <div className="flex gap-1 items-center h-full justify-between">
-      <FeedButton />
-      <div>
+      <FeedButton className="flex-1 max-w-fit w-0" />
+      <div className="shrink-0">
         {temporaryRelayUrls.length > 0 && (
           <SaveRelayDropdownMenu urls={temporaryRelayUrls} atTitlebar />
         )}
diff --git a/src/pages/secondary/ProfilePage/index.tsx b/src/pages/secondary/ProfilePage/index.tsx
index 22713c57..e0fab0a2 100644
--- a/src/pages/secondary/ProfilePage/index.tsx
+++ b/src/pages/secondary/ProfilePage/index.tsx
@@ -129,9 +129,13 @@ const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number },
           </div>
           <ProfileAbout about={about} className="text-wrap break-words whitespace-pre-wrap mt-2" />
           {website && (
-            <div className="flex gap-1 items-center text-primary mt-2">
-              <Link size={14} />
-              <a href={website} target="_blank" className="hover:underline">
+            <div className="flex gap-1 items-center text-primary mt-2 truncate">
+              <Link size={14} className="shrink-0" />
+              <a
+                href={website}
+                target="_blank"
+                className="hover:underline truncate flex-1 max-w-fit w-0"
+              >
                 {website}
               </a>
             </div>