Describe the problem that you experienced
The copy button in code blocks is positioned inside the code container and overlaps with the code content.
On smaller screens or when the code block is horizontally scrollable, the copy icon covers part of the code, making it difficult to read or copy correctly.
This creates a usability and readability issue in the documentation UI.
Enter the URL of the topic with the problem
https://angular.dev/guide/forms/dynamic-forms http://localhost:4201/guide/forms/dynamic-forms
Describe what you were looking for in the documentation
I was reading the Dynamic Forms guide and reviewing the example code blocks to understand how the form components are structured and implemented.
Describe the actions that led you to experience the problem
- Opened the Dynamic Forms guide.
- Viewed code blocks on a smaller screen or reduced browser width.
- Scrolled horizontally within the code block.
- Observed that the copy button overlaps and hides part of the code content.
Describe what you want to experience that would fix the problem
The copy button should not overlap with the code content.
It should be positioned in a way that does not interfere with readability, for example:
- Placed in the header row (near the file name)
- Or positioned outside the scrollable code area
- Or styled to avoid covering code text
Add a screenshot if that helps illustrate the problem
If this problem caused an exception or error, please paste it here
No error or exception occurred. This is a UI/UX issue in the documentation.
If the problem is browser-specific, please specify the device, OS, browser, and version
- OS: Windows 11 (WSL environment used for local docs)
- Browser: Microsoft Edge / Chrome
- Screen size: smaller viewport / responsive mode
Provide any additional information here in as much as detail as you can
The issue becomes more noticeable when the code block is horizontally scrollable. As the user scrolls, the copy button remains fixed and overlaps different parts of the code.
This can obscure important code segments and affect usability, especially on smaller screens.
Describe the problem that you experienced
The copy button in code blocks is positioned inside the code container and overlaps with the code content.
On smaller screens or when the code block is horizontally scrollable, the copy icon covers part of the code, making it difficult to read or copy correctly.
This creates a usability and readability issue in the documentation UI.
Enter the URL of the topic with the problem
https://angular.dev/guide/forms/dynamic-forms http://localhost:4201/guide/forms/dynamic-forms
Describe what you were looking for in the documentation
I was reading the Dynamic Forms guide and reviewing the example code blocks to understand how the form components are structured and implemented.
Describe the actions that led you to experience the problem
Describe what you want to experience that would fix the problem
The copy button should not overlap with the code content.
It should be positioned in a way that does not interfere with readability, for example:
Add a screenshot if that helps illustrate the problem
If this problem caused an exception or error, please paste it here
If the problem is browser-specific, please specify the device, OS, browser, and version
Provide any additional information here in as much as detail as you can