fix: Remove modal margins to fill entire screen without gaps

Add custom CSS overrides to ensure fullscreen modals fill the entire viewport
without any gaps on top, left, right, or bottom edges.

Changes:
- Force modal-dialog to use 0 margin and 100vw/100vh dimensions
- Remove border and border-radius from modal-content
- Set overflow hidden on modal-body to prevent scrollbars
- Use !important to override Bootstrap default styles

This fixes the issue where modals had visible gaps on the top and left sides
while content was slightly cut off on the right and bottom edges.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
MarekWo
2026-01-01 19:50:11 +01:00
parent 7986c4f047
commit 0a62b9ae04
+22
View File
@@ -40,6 +40,28 @@
max-width: 100%;
}
}
/* Modal fullscreen - remove all margins and padding */
#dmModal .modal-dialog.modal-fullscreen,
#contactsModal .modal-dialog.modal-fullscreen {
margin: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
height: 100vh !important;
max-height: 100vh !important;
}
#dmModal .modal-content,
#contactsModal .modal-content {
border: none !important;
border-radius: 0 !important;
height: 100vh !important;
}
#dmModal .modal-body,
#contactsModal .modal-body {
overflow: hidden !important;
}
</style>
{% endblock %}