redmineOH

Bug #3

Updated by 0x01 SIA about 2 months ago

## Codex task: Make When creating a new issue, the Description editor header match the full editor width 

 Fix the Description of input field formatting on the New Issue and Edit Issue forms. 

 ### Problem 

 The visible header or toolbar area above the Description input does "Description" is not span the full width of the editor/input container. This creates an uneven right edge and makes the editor look partially detached from its surrounding input field. 

 Use the screenshot attached to this issue as the visual reference. 

 ### Required work 

 1. Inspect the actual HTML structure produced for the Description field, including: 

    * the label; 
    * formatting toolbar; 
    * editor wrapper; 
    * textarea; 
    * preview area; 
    * any plugin-generated containers. 
 2. Identify which RedmineOH CSS rule limits the width of the header or toolbar. 
 3. Adjust the theme so that: 

    * the Description editor wrapper uses the available form width; 
    * the toolbar/header and textarea share the same left and right edges; 
    * padding, borders and `box-sizing` are consistent; 
    * the editor does not overflow its parent; 
    * preview mode and toolbar buttons remain functional; 
    * the layout adapts cleanly at narrower viewport widths. 
 4. Apply the correction to both: 

    * New Issue; 
    * Edit Issue. 
 5. Verify whether the same editor component appears in comments, wiki pages or other forms. Reuse a shared fix only when it is safe; otherwise scope it to the issue form. 
 6. Avoid hard-coded pixel widths that depend on the current viewport. Prefer `width: 100%`, appropriate flex/grid behaviour and `box-sizing: border-box`. 
 7. Do not modify Redmine core files. Keep the implementation inside the RedmineOH theme unless a theme-owned template override is already responsible. 

 ### Areas to verify 

 Test: 

 * new issue form; 
 * edit issue form; 
 * description edit and preview modes; 
 * toolbar buttons and dropdowns; 
 * textarea resizing; 
 * forms with and without attachments; 
 * desktop and narrow/mobile widths; 
 * browsers supported by the project. 

 ### Acceptance criteria 

 * The Description toolbar/header spans exactly the same usable width as the textarea/editor body. 
 * The editor’s left and right borders align. 
 * No horizontal overflow or clipped toolbar controls are introduced. 
 * Preview mode uses the same correctly aligned width. 
 * The attached screenshot’s visible defect is resolved. 
 * Other issue fields and unrelated text editors remain unchanged. 
 * No regression appears on the issue details or issue list pages. 

 ### Deliverable 

 Report: 

 * files changed; 
 * selectors added, removed or narrowed; 
 * the root cause of the width mismatch; 
 * pages and viewport sizes tested; 
 * whether the solution affects any other Redmine editor instances. 


  

 <img style="width: 1663px;" src="clipboard-202607260709-yvhvd.png"><br> 

Back