Save Template and Clear Preview button cut off on small screen in Template Builder

[pruthvirajpatil2024]

Describe the bug
In the Template Builder page, after create first template the "Save Template" & "Clear Preview" button on the top is getting cut on small screens. So it is hard to see and click on mobile.

To Reproduce
Steps to reproduce the behavior:

1. Inside admin login go to Facilities then facility with patients
2. From left drawer go to Settings
3. select Templates under settings
4. Click on create your first template
5. See both buttons of Clear Preview and Save Template are halfly visible all the time

Expected behavior
They should get visible in all screens

Screenshots
Both buttons are halfly visible --

Desktop (please complete the following information):
NA

Smartphone (please complete the following information):
Try resolutions like ~360 * 740 (Most used Smartphone view)

Additional context
Hamper usability and experience

---

🚨 DO NOT EDIT BELOW THIS LINE 🚨

Instructions for Requesting Assignment:

To request assignment, please clearly outline your solution and timeline by commenting on the issue using the format below:

Describe your solution clearly:
Provide a detailed explanation of your proposed solution, including your approach, key implementation steps, and relevant examples or references. Mention any dependencies, assumptions, or risks you foresee that might affect your timeline or implementation.

Expected Timeline:

• End date: [Expected submission date of a completed Pull Request]

Additional Context:
Include any other relevant context, links, screenshots, or resources that support your proposed solution.

🚨 Your assignment may be unassigned if there is no activity or progress within the stated timeline unless communicated clearly and agreed upon.

[sayandebnath-creator]

Describe your solution clearly:

This looks like a typical responsive UI issue where the action buttons (“Save Template” and “Clear Preview”) don’t adapt well to smaller screen sizes and end up getting partially cut off.

My approach would be to first inspect how these buttons are structured in the layout — most likely they’re inside a flex container with fixed sizing or no wrapping enabled.

To fix this, I would:

1. Update the container to allow wrapping (flex-wrap: wrap) so buttons don’t overflow
2. Avoid fixed widths on the buttons and let them resize naturally
3. Add proper spacing between them for readability
4. On smaller screens, stack the buttons vertically so they’re fully visible and easy to tap

For example, switching to a flexible layout and adding a mobile breakpoint should resolve the issue cleanly without affecting desktop views.

I would also double-check if any parent container has overflow: hidden or height restrictions that might be clipping the buttons.

Finally, I’d test across common mobile screen sizes (like 360×740) to ensure both buttons are fully visible and accessible.

Expected Timeline:
End date: 1 day

Additional Context:
This directly impacts usability since these are primary actions on the page. Fixing it should make the interface much smoother to use on mobile devices. I’ll include screenshots and testing notes in the PR to show the improvement.

[pruthvirajpatil2024]

@Jacobjeevan
Solution:
The top action bar in Template Builder has 3 buttons (Clear Preview | Preview Template | Save Template) in a fixed flex row with no responsive overflow handling, causing the rightmost "Save Template" button to clip off screen on smaller viewports.

Fix approach:

• Locate the action bar in the TemplateBuilder component
• Add flex-wrap or responsive Tailwind breakpoint classes so buttons wrap to next line on smaller screens
• Or alternate I will do is add overflow-x-auto to allow horizontal scroll on the action bar at mobile breakpoints
• Test on 360px, 375px and 414px viewport widths to confirm all 3 buttons are fully visible and clickable

Expected Timeline:

• End date: [1day]

Additional Context:
"Save Template" is the primary CTA on this page — its inaccessibility on mobile is higher impact than a secondary button being clipped. Screenshot attached shows the clipped "Save Templat" text on small viewport.