Centered default/hint-modal content used translate(-50%, -50%) with no
height cap, so a taller-than-viewport modal (e.g. project background
settings with the Unsplash grid) pushed its top edge above the viewport
where the container's overflow can't reach it — the upload button became
unreachable on short screens.
Cap the centered content to the viewport and scroll inside it, mirroring
the height limit the .top (quick actions) variant already has. The mobile
breakpoint resets both so the fullscreen layout keeps flowing in
.modal-container.
The quick actions menu (cmd+k) rendered without any background and grew
beyond the viewport:
- Its card visuals came from the global Bulma .card styles, which were
dropped when Card.vue got its own scoped copy — QuickActions is the
only place using a bare class="card" div, so it lost background,
border and shadow. Give it its own card styles.
- Its height limit came from Bulma's .modal-content max-height, lost
when the Bulma modal import was dropped in the native-dialog refactor.
The :deep(.modal-content) position override in QuickActions never
matched (.modal-content is an ancestor of the scoped selector, not a
descendant). Replace both with a proper `top` modal variant that
anchors the content 3rem below the top edge and caps its height,
resolving the FIXME asking for exactly that option.
- The dark scrim never showed: Chromium intermittently stops painting a
styled ::backdrop (after subtree re-renders, or while display is
transitioned) even though getComputedStyle reports the color. Move
the scrim onto the viewport-filling dialog element itself — same as
the old div-based .modal-mask — and drop the display/allow-discrete
transitions, which the JS-timed close fade never needed.
A <dialog> opened via showModal() lives in the browser's top layer, which
renders only on the first page during print — top-layer elements are
viewport-anchored and don't paginate. CSS overrides like position: static
have no effect since top-layer membership is browser-managed.
Swap to a non-modal dialog on beforeprint (removes it from the top layer
so content flows in normal document order) and back to modal on
afterprint. The accompanying @media print rules reset the dialog's fixed
positioning and overflow so the non-modal dialog can paginate freely.
The .avatar img in User.vue relied solely on the width/height HTML
attributes for sizing. Those are presentational hints with zero CSS
specificity, so Bulma's global reset (img { height: auto; max-width: 100% })
overrode them. While avatarSrc was still resolving (initial src=""),
the browser had no intrinsic dimensions to compute the auto height from
and fell back to the broken-image box (~96px in Chrome), then snapped
to the real size once the blob URL loaded.
Set inline-size/block-size explicitly via a CSS custom property bound
to the avatarSize prop so the rendered size is locked regardless of
load state or the Bulma reset.
Passes aria-label to the <dialog> element via attribute inheritance
so screen readers announce the dialog's purpose.
Fixes WCAG 4.1.2 (Name, Role, Value).
Adds role='status' and aria-live='polite' to the notification
container so screen readers announce status messages.
Fixes WCAG 4.1.3 (Status Messages).
Adds a visually-hidden skip-to-content link as the first focusable
element. Adds id='main-content' to the <main> element. Changes
<section> to <main> on auth pages for proper landmark navigation.
Fixes WCAG 2.4.1 (Bypass Blocks).
The Bulma partial applied justify-content: space-between on .pagination and
flex-order 1/2/3 on prev/list/next inside a tablet media query under
.is-centered — the port missed both. Pixel-diff against main is now zero.
BasePagination was reaching across slot boundaries with :deep() to style
.pagination-previous / -next / -link — markup it doesn't actually render.
Move that markup and the related scoped rules into a new PaginationItem
component that polymorphically renders RouterLink (when `to` is given)
or BaseButton (emit-based). BasePagination keeps only the scaffold it
actually owns: .pagination, .pagination-list, .pagination-ellipsis.
Pagination.vue and PaginationEmit.vue become thin wrappers around
BasePagination + PaginationItem; no more raw pagination-* class usage or
BaseButton imports in the emit wrapper.
The .app-container.has-background / .link-share-container.has-background
theme override moves with the .pagination-link rules into PaginationItem
as its own unscoped <style> block.
Result: 0 remaining :deep(.pagination-*) selectors (was 14).
The --modal-card-head-padding CSS variable is provided by Bulma's
components/modal partial. Inlining Bulma's default (20px) lets us drop that
partial without needing a local redeclaration.
Re-check props.enabled inside the dialogRef watcher. The watcher fires
once Vue mounts the <dialog>, but the caller may have flipped enabled
back to false between the openDialog() call and the mount flush. In that
case the prop state is disabled and we must not open the dialog.
Addresses augmentcode review on #2604.
If the modal is re-enabled within the 150ms close transition the
<dialog> element is still mounted and [open], so the dialogRef watcher
does not re-fire. Clear the leftover data-closing flag directly in
openDialog() so the dialog doesn't remain stuck at opacity 0.
Addresses augmentcode review on #2604.
Replace the nextTick-based showModal() call with a watch on the template
ref so the dialog is opened exactly when the <dialog> element mounts.
The previous implementation could silently skip showModal() if the mount
was deferred past the first nextTick, leaving the dialog in the DOM with
opacity: 0 and no click target. Observed in the Vikunja Desktop v2.3.0
Electron build where the search (quick actions) button was unresponsive.
Closes#2590
Replace the custom div-based Modal with the native HTML <dialog> element
using showModal()/close() API. Uses CSS opacity transitions with a
data-closing attribute for Firefox-compatible close animations, Teleport
to body, and focus save/restore. Updates E2E test selectors and fixes
QuickAddOverlay selectors for the new dialog structure.
Add desktopQuickEntryShortcut to frontend settings with a Desktop
App section in General settings, only visible when running in the
Electron app. The setting syncs to the desktop main process via
IPC whenever settings are loaded or saved.
Add a server selection screen matching the mobile app UX with
Vikunja Cloud, Try the Demo, and Custom Server URL options.
Extract all desktop login logic into a dedicated DesktopLogin
component. Use the existing ApiConfig component for custom server
URL input. Skip loading server config on startup to avoid showing
motd/demo popups on the login screen.
Add a new settings page for managing user-level webhooks. Extract
webhook form into shared WebhookManager component used by both
project and user webhook settings. Add routing, translations,
and navigation entry.
Change e.key to e.code in global keyboard shortcut handlers for
consistency with the new event.code-based shortcut system:
- ProjectList.vue: 'j'/'k'/'Enter' -> 'KeyJ'/'KeyK'/'Enter'
- useGanttBar.ts: 'ArrowLeft'/'ArrowRight' (identical values, for consistency)
- Modal.vue: 'Escape' (identical value, for consistency)
- Replace tailwindcss v3 with tailwindcss v4 + @tailwindcss/vite plugin
- Create dedicated tailwind.css entry with granular imports (skip preflight)
- Use CSS-first config with prefix(tw) instead of JS config
- Switch from PostCSS plugin to Vite plugin for better performance
- Update class prefix from tw- (dash) to tw: (colon) in all Vue files
- Remove @tailwind directives from global.scss
- Delete tailwind.config.js (replaced by CSS directives)
- Update stylelint at-rules for v4 directives
Allow users to switch between oldest-first and newest-first comment
ordering via a toggle button in the comments heading. The preference is
persisted as a frontend setting (commentSortOrder) and passed to the API
as the order_by query parameter so pagination works correctly.
When all comments fit on a single page, toggling reverses them
client-side to avoid an extra API call. New comments are inserted at the
correct position based on the active sort order, and in newest-first
mode the view scrolls to the top after adding a comment.
Link-share users fall back to a local (non-persisted) sort order since
they cannot save user settings.
Use the `ignoreDuplicates` prop from vue3-notification to ignore duplicate notifications, show a count (×N) instead when notifications are merged.
Superseeds and closes https://github.com/go-vikunja/vikunja/pull/971
---------
Co-authored-by: Dominik Pschenitschni <6173598+dpschen@users.noreply.github.com>
This adds the following shortcuts:
- `.` to copy the task identifier
- `..` to copy the task identifier and title
- `...` to copy the task identifier, title, and url
- `Control + .` to copy the task url
kolaente
bradmartin333
Tink bot
kolaente
Cristian Ivascu
Noah Neukam
Copilot
Weijie Zhao