Fixed a lot of responsive problems.

- Fixed auth problem
- Fixed BBCode and Markdown apparition in some unnecessary parts

resources/css/components/cards.css

@@ -30,6 +30,7 @@
     border: 1px solid var(--border);
     display: flex;
     min-width: 0;
+    max-width: 100%;
     flex-direction: column;
     transition: transform 0.2s, border-color 0.2s;
     cursor: pointer;
@@ -72,6 +73,7 @@
     .entry-card-info {
         padding: 15px;
         flex-grow: 1;
+        min-width: 0;
         display: flex;
         flex-direction: column;
     }
@@ -82,13 +84,16 @@
         font-size: 1.1rem;
         margin-bottom: 5px;
         line-height: 1.3;
-        word-wrap: break-word;
+        overflow-wrap: anywhere;
+        word-break: break-word;
     }
 
     .entry-card-author {
         color: var(--rhpz-orange);
         font-size: 0.85rem;
         margin-bottom: 10px;
+        overflow-wrap: anywhere;
+        word-break: break-word;
     }
 
     .entry-card-meta {
@@ -148,6 +153,9 @@
 
     .entry-card-meta {
         font-size: 0.75rem;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 6px;
     }
 }
 

resources/css/components/common.css

@@ -43,6 +43,45 @@
     background-color: rgba(129, 199, 132, 0.1);
 }
 
+.back-to-top {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    .back-to-top {
+        display: none;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        position: fixed;
+        right: 14px;
+        bottom: 14px;
+        z-index: 1000;
+        padding: 10px 14px;
+        border-radius: 999px;
+        background-color: var(--bg2);
+        border: 1px solid var(--border);
+        color: var(--text);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+        opacity: 0;
+        pointer-events: none;
+        transform: translateY(10px);
+        transition: opacity 0.2s ease, transform 0.2s ease;
+    }
+
+    .back-to-top.visible {
+        display: inline-flex;
+        opacity: 1;
+        pointer-events: auto;
+        transform: translateY(0);
+    }
+
+    .back-to-top span {
+        font-size: 0.78rem;
+        font-weight: 600;
+    }
+}
+
 /* BLOCK */
 
 .block {

resources/css/components/database.css

@@ -227,8 +227,10 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-wrap: wrap;
     gap: 4px;
     margin-top: 20px;
+    width: 100%;
 
     .btn {
         min-width: 36px;
@@ -255,18 +257,20 @@
 }
 
 @media (max-width: 900px) {
-    .database-layout {
-        flex-direction: column;
-    }
-
     .database-wrapper {
         flex-direction: column;
+        width: 100%;
     }
 
     .database-filters {
         width: 100%;
         display: grid;
-        grid-template-columns: repeat(2,1fr);
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .database-results {
+        width: 100%;
+        min-width: 0;
     }
 
     .database-filter-group:last-child {
@@ -286,13 +290,32 @@
         flex-wrap: wrap;
     }
 
+    .filter-bar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .filter-bar .filter-bar-search {
+        max-width: none;
+        flex: initial;
+        width: 100%;
+    }
+
+    .filter-bar .btn {
+        width: 100%;
+        justify-content: center;
+    }
+
     .database-wrapper {
         flex-direction: column;
         gap: 15px;
+        width: 100%;
     }
 
     .database-filters {
-        width: 100%;
+        width: min(100%, 420px);
+        max-width: 420px;
+        margin: 0 auto;
         grid-template-columns: 1fr;
         order: -1;
         margin-bottom: 10px;
@@ -303,7 +326,7 @@
     }
 
     .grid-entries {
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: 15px;
     }
 }
@@ -311,6 +334,20 @@
 @media (max-width: 600px) {
     .database-search {
         flex-direction: column;
+        align-items: stretch;
+    }
+
+    .filter-bar {
+        padding: 12px;
+    }
+
+    .filter-bar .filter-bar-search {
+        max-width: none;
+    }
+
+    .filter-bar .btn {
+        width: 100%;
+        justify-content: center;
     }
 
     .database-filters {
@@ -318,7 +355,7 @@
     }
 
     .grid-entries {
-        grid-template-columns: repeat(2, 1fr);
+        grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 12px;
     }
 

resources/css/components/forms.css

@@ -393,6 +393,37 @@
     min-width: 20px;
     text-align: center;
 }
+
+.gallery-mobile-controls {
+    display: none;
+}
+
+@media (max-width: 1024px) {
+    .gallery-mobile-controls {
+        display: flex;
+        justify-content: flex-end;
+        gap: 6px;
+        margin-top: 6px;
+    }
+
+    .gallery-move-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        border: 1px solid var(--border);
+        background-color: var(--bg2);
+        color: var(--text);
+        cursor: pointer;
+        padding: 0;
+    }
+
+    .gallery-move-btn:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+    }
+}
 .authors-list {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
@@ -510,13 +541,30 @@
 }
 
 @media (max-width: 600px) {
-    .upload-item-actions {
+    .upload-item {
         flex-direction: column;
+        align-items: stretch;
+    }
+
+    .upload-item-info {
+        width: 100%;
+        flex: 1 1 auto;
+        min-width: 0;
+    }
+
+    .upload-item-actions {
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
         gap: 8px;
+        width: 100%;
+        margin-top: 8px;
+        flex-basis: 100%;
     }
 
     .upload-item-actions .btn {
-        width: 100%;
+        width: auto;
+        flex: 0 0 auto;
     }
 }
 .file-state-icon { width: 18px; height: 18px; }
@@ -673,10 +721,18 @@
     .grid-hashes {
         grid-template-columns: 1fr;
     }
-
+    .grid-credits {
+        grid-template-columns: 1fr;
+    }
+    .grid-first {
+        display: none;
+    }
     .hash-first {
         display: none;
     }
+    .author-search-selected {
+        display: none;
+    }
 }
 
 @media (max-width: 600px) {
@@ -706,4 +762,20 @@
     .form-error-text {
         font-size: 0.8rem;
     }
+
+    .form-type-of-checkboxes {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1rem;
+
+        label {
+            box-sizing: border-box;
+            margin: 0;
+        }
+
+        input[type="checkbox"] {
+            transform: scale(1.5);
+            margin-right: 1.33rem;
+        }
+    }
 }

resources/css/components/grid.css

@@ -30,8 +30,38 @@
 
 .grid-entries {
     display: grid;
-    grid-template-columns: repeat(6,1fr);
+    grid-template-columns: repeat(6, minmax(0, 1fr));
     gap: 20px;
     margin-bottom: 20px;
 }
 
+@media (max-width: 1400px) {
+    .grid-entries {
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 1200px) {
+    .grid-entries {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 900px) {
+    .grid-entries {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 640px) {
+    .grid-entries {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 420px) {
+    .grid-entries {
+        grid-template-columns: 1fr;
+    }
+}
+