diff --git a/assets/css/fixes.css b/assets/css/fixes.css new file mode 100644 index 0000000..24c7346 --- /dev/null +++ b/assets/css/fixes.css @@ -0,0 +1,182 @@ +/* Correctifs pour les problèmes d'affichage des champs de texte */ + +/* 1. Règles globales pour tous les conteneurs de formulaire */ +.form-group { + margin-bottom: var(--spacing-lg); + width: 100%; + position: relative; + overflow: visible; +} + +/* 2. Correction pour les champs de texte */ +.form-group input[type="text"], +.form-group input[type="password"], +.form-group textarea, +.form-group input[type="file"], +.form-group select { + width: 100%; + box-sizing: border-box; + max-width: 100%; + padding: var(--spacing-sm); + background-color: var(--input-bg); + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); + color: var(--text-primary); + font-size: 1rem; +} + +/* 3. Correction pour les modales et leurs contenus */ +.modal-content { + max-width: 90vw; + max-height: 90vh; + overflow-y: auto; + padding: var(--spacing-md); + width: auto; + box-sizing: border-box; +} + +.modal-header, +.modal-body, +.modal-footer { + width: 100%; + box-sizing: border-box; + padding: var(--spacing-md); +} + +/* 4. Correction pour l'éditeur Quill */ +.ql-container { + overflow: auto; + max-width: 100%; +} + +.ql-editor { + min-height: 200px; + max-width: 100%; + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; +} + +/* 5. Gestion spécifique pour les grilles et les flex containers */ +.story-item, +.chapter-item, +.user-item { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-md); + width: 100%; + box-sizing: border-box; +} + +.story-info, +.chapter-info { + flex: 1; + min-width: 0; /* Empêche le dépassement */ + overflow: hidden; +} + +/* 6. Meilleures media queries pour la responsivité */ +@media (max-width: 768px) { + .story-item, + .chapter-item, + .user-item { + flex-direction: column; + } + + .story-actions, + .chapter-actions, + .user-actions { + width: 100%; + flex-wrap: wrap; + justify-content: flex-start; + } + + .form-group input[type="text"], + .form-group input[type="password"], + .form-group textarea { + font-size: 16px; /* Pour éviter le zoom sur mobile */ + } + + #chapterTitle { + width: 100%; + } +} + +/* 7. Correction pour les boutons qui peuvent déborder */ +.button, +button { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; +} + +/* 8. Meilleure gestion des tables et des listes */ +table { + width: 100%; + max-width: 100%; + table-layout: fixed; + border-collapse: collapse; +} + +td, th { + word-break: break-word; + overflow-wrap: break-word; + padding: var(--spacing-sm); +} + +/* 9. Amélioration du contenu affichable */ +.novel-description, +.chapter-content, +.about-description { + width: 100%; + max-width: 100%; + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; +} + +/* 10. Flexibilité des images dans l'éditeur et le contenu */ +img { + max-width: 100%; + height: auto; +} + +/* 11. Correction pour les éléments de navigation */ +.chapters-list a { + display: block; + width: 100%; + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* 12. Correction pour la page options.php */ +.options-section { + width: 100%; + box-sizing: border-box; + overflow: hidden; +} + +#aboutEditor { + max-width: 100%; +} + +.cover-preview-container { + max-width: 100%; + overflow: hidden; +} + +.link-item { + width: 100%; + box-sizing: border-box; +} + +/* 13. Empêcher les textes de déborder */ +h1, h2, h3, h4, h5, h6, p { + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; + max-width: 100%; +} \ No newline at end of file diff --git a/assets/css/main.css b/assets/css/main.css index c5433ff..012e17a 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -4,4 +4,5 @@ @import 'components.css'; @import 'forms.css'; @import 'editor.css'; -@import 'buttons.css'; \ No newline at end of file +@import 'buttons.css'; +@import 'fixes.css'; \ No newline at end of file