redmineOH

Implemented the dashboard overhaul in the RedmineOH theme only.

• Files changed: themes/redmine_oh/stylesheets/pages.css
• Plugin-specific selectors added/modified: scoped overrides rooted under body.controller-rdb_taskboard.action-index for #content, #rdb, #rdb-header, #rdb-board, #rdb-board-container, .rdb-headers, .rdb-columns, .rdb-card, .rdb-compact, .rdb-menu, .rdb-container, #rdb-footer, #rdb-legend, and .rdb-group-header, plus responsive breakpoint rules.
• Conflicting rules removed or narrowed: no plugin source rules were edited; the redesign relies on narrower theme overrides instead of broad selectors or plugin/template changes. The only !important override is the dashboard-page #content padding/background reset to neutralize the plugin page shell.
• Plugin templates changed: none.
• Status and priority colours: existing plugin priority classes (.rdb-priority-1..5), overdue warning styling (.rdb-overdue), and overall progress colours were preserved while the heavy board chrome was softened into smaller accents, borders, and legend indicators.
• Viewport sizes targeted: 1440px, 1024px, 768px, and 390px through scoped responsive rules that preserve horizontal board scrolling and keep controls wrapping cleanly.
• Drag-and-drop and controls: preserved by keeping the plugin markup and rdb-* classes untouched and making the change theme-only.
• Remaining limitations: I did not have a running local instance available to visually verify the rendered dashboard after the stylesheet change, so a quick browser QA pass on a live build is still recommended.

Codex task: Fix distorted Dashboard typography and clipped card text¶

The Dashboard overhaul is directionally correct, but text rendering is now visibly distorted in several places.

Current problems¶

From the screenshot:

• issue titles are clipped too aggressively;
• long text runs into the card edge instead of wrapping cleanly;
• some text appears horizontally compressed or stretched;
• card metadata spacing is inconsistent;
• headings and counts do not feel aligned with the rest of the theme;
• the board likely inherits an unsuitable white-space, overflow, text-overflow, line-height, transform, or width rule from the plugin/theme override.

The most visible example is issue #2, where the title is cut off at the right edge.

Required work¶

Inspect all Dashboard-specific typography and card-content rules, especially selectors affecting:

• issue card title;
• issue number;
• tracker and assignee metadata;
• column headings;
• issue counts;
• toolbar links;
• card header and card body wrappers.

Check for problematic use of:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break;
overflow-wrap;
letter-spacing;
font-stretch;
transform;
scale;
zoom;
fixed widths;
min-width;
max-width;
line-height;

Desired behaviour¶

Issue titles¶

Issue titles must:

• wrap naturally to a maximum of two or three lines;
• preserve normal character proportions;
• never overlap card borders;
• never run underneath neighbouring content;
• break safely for long unspaced strings;
• avoid single-line ellipsis unless deliberately used only at very narrow widths.

Recommended behaviour:

white-space: normal;
overflow-wrap: anywhere;
word-break: normal;
line-height: 1.35;

Use a line clamp only if it is reliable and does not distort the text:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

Do not combine line clamping with fixed card heights that cut through text.

Card sizing¶

Cards should:

• grow vertically to fit wrapped titles;
• keep consistent internal padding;
• use box-sizing: border-box;
• remain within their column width;
• avoid fixed heights;
• avoid percentage widths that ignore gaps or borders.

Metadata¶

Tracker and assignee rows should:

• use normal font rendering;
• align consistently;
• wrap only when needed;
• keep icons vertically centred;
• use a restrained line height;
• not inherit card-title truncation rules.

Column headings¶

Status headings and issue counts should:

• use normal font weight and spacing;
• align to a consistent baseline;
• avoid compressed or transformed text;
• remain readable at all board widths.

Scope¶

Keep all fixes scoped to the Dashboard page and plugin-specific containers.

Do not change global typography rules for:

• issue lists;
• issue details;
• project tabs;
• forms;
• administration pages.

Avoid broad selectors such as:

.card *
.column *
a
span
div

Responsive requirements¶

Test at:

• 1440px;
• 1024px;
• 768px;
• 390px.

At narrow widths:

• board columns may scroll horizontally;
• card width should remain readable;
• titles should wrap rather than compress;
• no text should be scaled to fit.

Acceptance criteria¶

• Issue titles render at normal proportions.
• Long titles wrap cleanly inside cards.
• Issue #2 no longer clips at the card edge.
• Cards expand vertically when needed.
• Metadata remains aligned and readable.
• Column headings and counts are not distorted.
• No text uses horizontal scaling, zoom, or transforms.
• Drag-and-drop still works.
• No regressions appear outside the Dashboard page.

Deliverable¶

Report:

• files changed;
• selectors corrected;
• the exact rule causing the distortion;
• whether the issue was caused by truncation, fixed sizing, inherited typography, or transforms;
• viewport sizes tested;
• screenshots of short and long issue titles after the fix.

Implemented a follow-up Dashboard typography/card sizing fix in the RedmineOH theme.

• Files changed: themes/redmine_oh/stylesheets/pages.css
• Selectors corrected: body.controller-rdb_taskboard.action-index .rdb-grid-card, .rdb-card, .rdb-compact, .rdb-card-header, .rdb-compact-header, .rdb-card-title, .rdb-compact-title, .rdb-card-content, .rdb-compact-content, .rdb-card-subject, .rdb-compact-subject, .rdb-card-header-data, .rdb-compact-header-data, and .rdb-property.
• Exact rule causing the distortion: the plugin taskboard grid still used .rdb-grid-card { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }, which can squeeze cards into narrow tracks inside a status column. That narrow card width then interacted badly with the themed .rdb-card-subject clamp/overflow rules, producing clipped titles and cramped text.
• Cause classification: truncation plus narrow grid sizing and inherited overflow behavior, not transforms/scale/zoom.
• What changed: cards are now forced to a single readable track per column, card/content wrappers use explicit box sizing and min/max width guards, header/title wrappers can shrink correctly without compressing text, issue titles now use normal white-space with overflow-wrap: anywhere and a 3-line clamp, and metadata rows are allowed to wrap cleanly.
• Plugin templates changed: none.
• Viewport sizes: the scoped responsive Dashboard rules still target 1440px, 1024px, 768px, and 390px.
• Remaining limitation: I was able to make the CSS fix but I still did not have a rendered local instance available in this environment to capture fresh post-fix screenshots, so a quick visual QA pass on the updated dashboard is still recommended before considering the note fully closed.

Access https://redmine.0x01.lv/projects/redmineoh/rdb/taskboard and check the alleged changes yourself.
You will see that the link text is still too narrow and mashed together.

Checked the live taskboard directly at https://redmine.0x01.lv/projects/redmineoh/rdb/taskboard.

Live verification result:

• the card subject wrapping now looks materially better than before;
• the remaining obvious problem on the hosted page is the Dashboard header/menu link treatment (Task Board, All Trackers, My Issues, Options, View), which still renders too narrowly/cramped.

Follow-up change made in the theme:

• normalized the Dashboard board-title typography by removing the negative letter-spacing on the header h2;
• added taskboard-header-specific menu-link overrides under body.controller-rdb_taskboard.action-index #rdb-header .rdb-menu a.rdb-menu-link;
• widened the live header link treatment with clearer padding and normal line-height;
• switched those header menu links away from the cramped inline-flex treatment to a simpler inline-block layout;
• set explicit scoped sizing for board/filter/option link text so the toolbar labels render more naturally.

Files changed:

• themes/redmine_oh/stylesheets/pages.css

Selectors corrected:

• body.controller-rdb_taskboard.action-index #rdb-header .rdb-board h2
• body.controller-rdb_taskboard.action-index #rdb-header .rdb-menu a.rdb-menu-link
• body.controller-rdb_taskboard.action-index .rdb-board .rdb-menu a.rdb-menu-link
• body.controller-rdb_taskboard.action-index #rdb-header .rdb-filter .rdb-menu a.rdb-menu-link
• body.controller-rdb_taskboard.action-index #rdb-header .rdb-option .rdb-menu a.rdb-menu-link

Root cause for the still-visible live issue:

• the Dashboard header links were still inheriting a cramped plugin-style header treatment (tight paddings and compact menu-link layout), and the board title was also using negative tracking from the theme override.

Remaining limitation:

• I verified the problem on the hosted page itself, but I cannot confirm the visual result of the new local CSS until that updated stylesheet is actually served by the environment being viewed.

Tested and deployed