terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: align and widen message stream cards

Browse Source
This commit is contained in:
TerryM
2026-05-27 11:58:40 +08:00
parent 3f0a395f40
commit 7cd48f767e
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/messageStream/FilterChips.tsx
View File

@@ -21,7 +21,7 @@ export type FilterChipsProps = {
export function FilterChips({ type, onTypeChange }: FilterChipsProps) { export function FilterChips({ type, onTypeChange }: FilterChipsProps) {
const { t } = useI18n(); const { t } = useI18n();
return ( return (
<div className="sticky top-0 z-10 -mx-3 border-b border-ark-line bg-ark-bg/90 px-3 py-2 backdrop-blur md:-mx-0 md:rounded-t-xl"> <div className="sticky top-0 z-10 border-b border-ark-line bg-ark-bg/90 py-2 backdrop-blur md:rounded-t-xl">
<div className="flex gap-1.5 overflow-x-auto whitespace-nowrap [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"> <div className="flex gap-1.5 overflow-x-auto whitespace-nowrap [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
{TYPE_FILTERS.map((tp) => { {TYPE_FILTERS.map((tp) => {
const active = type === tp; const active = type === tp;

6
src/components/messageStream/MessageBubble.tsx
View File

@@ -34,10 +34,10 @@ export function MessageBubble({ post }: { post: Post }) {
return ( return (
<article <article
id={`post-${post.id}`} id={`post-${post.id}`}
className={`relative self-start rounded-2xl bg-ark-panel text-left shadow-sm ${ className={`relative mx-auto rounded-2xl bg-ark-panel text-left shadow-sm ${
isVisual isVisual
? "w-[82vw] max-w-[320px] md:w-[52vw] md:max-w-[420px] lg:w-[46vw] lg:max-w-[520px]" ? "w-[82vw] max-w-[320px] md:w-[52vw] md:max-w-[420px] lg:w-[52vw] lg:max-w-[680px] xl:w-[48vw] xl:max-w-[760px]"
: "inline-block max-w-[92%] md:max-w-[680px]" : "inline-block max-w-[92%] md:max-w-[680px] lg:max-w-[760px] xl:max-w-[820px]"
} ${isTextOnly ? "px-3 py-2" : "p-2"}`} } ${isTextOnly ? "px-3 py-2" : "p-2"}`}
> >
<Bubble post={post} /> <Bubble post={post} />