fix de l'affichage des champs de texte

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%;
+}

assets/css/main.css

@@ -4,4 +4,5 @@
 @import 'components.css';
 @import 'forms.css';
 @import 'editor.css';
-@import 'buttons.css';
+@import 'buttons.css';
+@import 'fixes.css';