Skip to content

Merge to main #120

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bahmez merged 3 commits into from
Feb 8, 2026
Merged

Merge to main #120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e0bc051
feat: integrate @tailwindcss/typography and enhance styling
bahmez Feb 8, 2026
7a18d85
fix: disable img element linting and remove unused import
bahmez Feb 8, 2026
636dbf9
Merge pull request #119 from bahmez/bugfix/improve-responsive
bahmez Feb 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
"superjson": "^2.2.2"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.19",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.1",
"@testing-library/user-event": "^14.6.1",
Expand Down
22 changes: 11 additions & 11 deletions apps/web/src/app/(app)/dashboard/boards/[boardId]/board-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -934,9 +934,9 @@ export default function BoardClient({ boardId }: { boardId: string }) {

return (
<div className="h-full flex flex-col" style={getBoardBackgroundStyle(board.background, { fallback: '#0b0f13' })}>
<div className="px-6 pt-5 pb-3 text-[#b6c2cf] flex items-center justify-between border-b border-[#9fadbc29] bg-[#0b0f13]/70 backdrop-blur-sm">
<div>
<div className="text-xl font-semibold">
<div className="px-3 sm:px-6 pt-3 sm:pt-5 pb-2 sm:pb-3 text-[#b6c2cf] flex flex-wrap items-center justify-between gap-2 border-b border-[#9fadbc29] bg-[#0b0f13]/70 backdrop-blur-sm">
<div className="min-w-0 flex-1">
<div className="text-lg sm:text-xl font-semibold truncate">
{isEditingBoardTitle ? (
<Input
autoFocus
Expand Down Expand Up @@ -965,7 +965,7 @@ export default function BoardClient({ boardId }: { boardId: string }) {
) : (
<button
type="button"
className="hover:bg-[#a6c5e229] rounded px-2 py-1 -ml-2 transition-colors"
className="hover:bg-[#a6c5e229] rounded px-2 py-1 -ml-2 transition-colors truncate max-w-full text-left"
onClick={() => {
setBoardTitleDraft(board.title);
setIsEditingBoardTitle(true);
Expand All @@ -975,15 +975,15 @@ export default function BoardClient({ boardId }: { boardId: string }) {
</button>
)}
</div>
{board.description ? <div className="text-sm text-[#9fadbc] mt-1">{board.description}</div> : null}
{board.description ? <div className="text-sm text-[#9fadbc] mt-1 truncate">{board.description}</div> : null}
</div>

<div className="flex gap-2">
<div className="flex flex-wrap gap-2 shrink-0">
<Dialog open={backgroundPickerOpen} onOpenChange={setBackgroundPickerOpen}>
<DialogTrigger asChild>
<Button variant="ghost" className="gap-2" disabled={!canEditBackground}>
<Button variant="ghost" className="gap-2" disabled={!canEditBackground} size="sm">
<Paintbrush className="h-4 w-4" />
{t('board.background')}
<span className="hidden sm:inline">{t('board.background')}</span>
</Button>
</DialogTrigger>
<DialogContent className="bg-[#1d2125] border-[#9fadbc29] text-[#b6c2cf] max-w-2xl">
Expand Down Expand Up @@ -1073,9 +1073,9 @@ export default function BoardClient({ boardId }: { boardId: string }) {
</Dialog>

<Dialog open={boardActivityOpen} onOpenChange={setBoardActivityOpen}>
<Button variant="ghost" className="gap-2" onClick={() => setBoardActivityOpen(true)}>
<Button variant="ghost" className="gap-2" onClick={() => setBoardActivityOpen(true)} size="sm">
<ScrollText className="h-4 w-4" />
{t('board.board_activity')}
<span className="hidden sm:inline">{t('board.board_activity')}</span>
</Button>
<DialogContent className="bg-[#1d2125] border-[#9fadbc29] text-[#b6c2cf] max-w-2xl">
<DialogHeader>
Expand Down Expand Up @@ -1130,7 +1130,7 @@ export default function BoardClient({ boardId }: { boardId: string }) {

<Dialog>
<DialogTrigger asChild>
<Button variant="trello">{t('board.add_column')}</Button>
<Button variant="trello" size="sm">{t('board.add_column')}</Button>
</DialogTrigger>
<DialogContent className="bg-[#1d2125] border-[#9fadbc29] text-[#b6c2cf]">
<DialogHeader>
Expand Down
25 changes: 13 additions & 12 deletions apps/web/src/app/(app)/dashboard/dashboard-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,20 +190,20 @@ export default function DashboardClient() {
const pageWorkspaces = workspaces.slice(wsStart, wsStart + WORKSPACES_PER_PAGE);

return (
<div className="p-6 text-[#b6c2cf]">
<div className="flex items-start justify-between gap-4">
<div>
<h1 className="text-2xl font-semibold">Dashboard</h1>
<p className="mt-2 text-[#9fadbc]">
<div className="p-4 sm:p-6 text-[#b6c2cf] overflow-x-hidden">
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 sm:gap-4">
<div className="min-w-0">
<h1 className="text-xl sm:text-2xl font-semibold">Dashboard</h1>
<p className="mt-1 sm:mt-2 text-[#9fadbc] text-sm">
{archivedView ? t('dashboard.archived_workspaces') : t('dashboard.all_workspaces')}
</p>
</div>

<div className="flex items-center gap-2">
<div className="flex flex-wrap items-center gap-2 shrink-0">
{!archivedView && (
<Dialog>
<DialogTrigger asChild>
<Button variant="trelloGray">{t('dashboard.create_board')}</Button>
<Button variant="trelloGray" size="sm">{t('dashboard.create_board')}</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
Expand Down Expand Up @@ -236,22 +236,23 @@ export default function DashboardClient() {
{pageWorkspaces.map((ws) => {
const page = boardsPagesByWorkspace[ws.id] ?? 1;
return (
<section key={ws.id} className="rounded-xl border border-[#9fadbc29] bg-[#1d2125] p-5">
<div className="flex items-start justify-between gap-4">
<div className="min-w-0">
<div className="text-lg font-semibold text-[#b6c2cf] truncate">{ws.title}</div>
<section key={ws.id} className="rounded-xl border border-[#9fadbc29] bg-[#1d2125] p-4 sm:p-5">
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 sm:gap-4">
<div className="min-w-0 flex-1">
<div className="text-base sm:text-lg font-semibold text-[#b6c2cf] truncate">{ws.title}</div>
{ws.description ? <div className="text-sm text-[#9fadbc] mt-1 line-clamp-2">{ws.description}</div> : null}
</div>
{archivedView ? (
<Button
variant="trelloGray"
size="sm"
disabled={unarchive.isPending}
onClick={() => unarchive.mutate({ workspaceId: ws.id })}
>
{t('dashboard.remove_from_archives')}
</Button>
) : (
<Button asChild variant="trelloGray">
<Button asChild variant="trelloGray" size="sm">
<Link href={`/dashboard/workspaces/${ws.id}`}>{t('navbar.see_more')}</Link>
</Button>
)}
Expand Down
21 changes: 11 additions & 10 deletions apps/web/src/app/(app)/dashboard/members/members-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,15 +60,15 @@ function MemberRow({
const cannotRemove = isLastMember || isLastAdmin;

return (
<div className="flex items-center justify-between gap-3 rounded-md border border-[#9fadbc29] p-3">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-3 rounded-md border border-[#9fadbc29] p-3">
<div className="min-w-0">
<div className="text-sm font-medium truncate">{label}</div>
{secondary ? <div className="text-xs text-[#9fadbc] truncate">{secondary}</div> : null}
</div>

<div className="flex items-center gap-2">
<div className="flex items-center gap-2 shrink-0">
<Select value={member.role} onValueChange={(v) => onUpdateRole(member.userId, v as Role)}>
<SelectTrigger className="h-9 w-[140px] bg-[#22272b] border-[#9fadbc29] text-[#b6c2cf]">
<SelectTrigger className="h-9 w-[120px] sm:w-[140px] bg-[#22272b] border-[#9fadbc29] text-[#b6c2cf]">
<SelectValue />
</SelectTrigger>
<SelectContent>
Expand All @@ -82,6 +82,7 @@ function MemberRow({

<Button
variant="ghost"
size="sm"
className="h-9 text-[#9fadbc] hover:bg-[#a6c5e229]"
disabled={cannotRemove}
onClick={() => {
Expand Down Expand Up @@ -203,19 +204,19 @@ export default function MembersClient() {
}

return (
<div className="p-6 text-[#b6c2cf]">
<div className="flex items-start justify-between gap-4">
<div className="p-4 sm:p-6 text-[#b6c2cf] overflow-x-hidden">
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 sm:gap-4">
<div className="min-w-0">
<h1 className="text-2xl font-semibold truncate">{t('members.page_title')}</h1>
<p className="mt-2 text-[#9fadbc]">
<h1 className="text-xl sm:text-2xl font-semibold truncate">{t('members.page_title')}</h1>
<p className="mt-1 sm:mt-2 text-[#9fadbc] text-sm">
Workspace: <span className="text-[#b6c2cf]">{wsQuery.data?.title ?? workspaceId}</span>
</p>
</div>

<div className="flex items-center gap-2">
<div className="flex flex-wrap items-center gap-2 shrink-0">
<Dialog open={addOpen} onOpenChange={setAddOpen}>
<DialogTrigger asChild>
<Button variant="trelloGray">{t('members.add_member_btn')}</Button>
<Button variant="trelloGray" size="sm">{t('members.add_member_btn')}</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
Expand Down Expand Up @@ -283,7 +284,7 @@ export default function MembersClient() {

<Dialog open={inviteOpen} onOpenChange={setInviteOpen}>
<DialogTrigger asChild>
<Button variant="trello">{t('members.create_invite_btn')}</Button>
<Button variant="trello" size="sm">{t('members.create_invite_btn')}</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
Expand Down
65 changes: 65 additions & 0 deletions apps/web/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,11 @@
@apply border-border;
}

html,
body {
@apply bg-background text-foreground;
overflow-x: hidden;
max-width: 100vw;
}
}

Expand Down Expand Up @@ -86,3 +89,65 @@
.w-md-editor-text {
color: #b6c2cf !important;
}

/* Dark prose overrides for ticket modals (complement @tailwindcss/typography) */
.prose-invert {
--tw-prose-body: #b6c2cf;
--tw-prose-headings: #d2dce6;
--tw-prose-lead: #9fadbc;
--tw-prose-links: #579dff;
--tw-prose-bold: #d2dce6;
--tw-prose-counters: #9fadbc;
--tw-prose-bullets: #9fadbc;
--tw-prose-hr: #9fadbc29;
--tw-prose-quotes: #9fadbc;
--tw-prose-quote-borders: #579dff;
--tw-prose-captions: #9fadbc;
--tw-prose-code: #f78166;
--tw-prose-pre-code: #b6c2cf;
--tw-prose-pre-bg: #1d2125;
--tw-prose-th-borders: #9fadbc29;
--tw-prose-td-borders: #9fadbc29;
}

.prose-invert code:not(pre code) {
background-color: #1d2125;
border: 1px solid rgba(159, 173, 188, 0.16);
border-radius: 0.25rem;
padding: 0.125rem 0.375rem;
font-size: 0.8em;
}

.prose-invert pre {
background-color: #1d2125 !important;
border: 1px solid rgba(159, 173, 188, 0.16);
border-radius: 0.5rem;
}

.prose-invert blockquote {
border-left-color: #579dff;
}

.prose-invert table {
border-collapse: collapse;
}

.prose-invert th,
.prose-invert td {
border: 1px solid rgba(159, 173, 188, 0.16);
padding: 0.5rem 0.75rem;
}

.prose-invert thead {
background-color: #1d2125;
}

.prose-invert img {
border-radius: 0.5rem;
border: 1px solid rgba(159, 173, 188, 0.16);
}

.prose-invert input[type="checkbox"] {
accent-color: #579dff;
margin-right: 0.5rem;
}
Loading