fix responsive styling

src/components/thread/Pagination.jsx

@@ -21,7 +21,7 @@ export default function Pagination(props) {
         onChange={handlePageChange}
         itemClass="page-item"
         linkClass="page-link"
-        hideNavigation={false}
+        hideNavigation="false"
       />
     </div>
   );

src/components/thread/Post.jsx

@@ -106,29 +106,30 @@ export default function Post(props) {
           </div>
         </div>
 
-        <div id="headerButton">
-          <div className="buttonContainer">
+        
             {content.user_id == AuthService.getCurrentUserId() && (
-              <div>
-                {checkType == 'threads' && (
-                  <Button
-                    type="button"
-                    text="Edit"
-                    color="none-green"
-                    url={`thread/edit/${content.id}`}
-                  />
-                )}
-                <button
-                  type="button"
-                  className="deleteButton"
-                  onClick={() => deletePost(user.username)}
-                >
-                  Delete
-                </button>
-              </div>
+              <div id="headerButton">
+                <div className="buttonContainer">
+                  <div>
+                    {checkType == 'threads' && (
+                      <Button
+                        type="button"
+                        text="Edit"
+                        color="none-green"
+                        url={`thread/edit/${content.id}`}
+                      />
+                    )}
+                    <button
+                      type="button"
+                      className="deleteButton"
+                      onClick={() => deletePost(user.username)}
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </div>
+            </div>
             )}
-          </div>
-        </div>
       </div>
       <div id="postContent">
         {props.type == 'thread' && <h1 id="judul">{content.title}</h1>}

src/styles/profile/Profile.css

@@ -75,4 +75,20 @@
     p {
         font-size: 14px;
     }
+
+    .sub_header_my_threads {
+        flex-wrap: wrap;
+    }
+}
+
+@media only screen and (max-device-width : 320px) {
+    .sub_header_my_threads {
+        flex-wrap: wrap;
+        justify-content: center;
+        flex-direction: column;
+    }
+
+    .my_threads_section p {
+        text-align: center;
+    }
 }
\ No newline at end of file

src/styles/thread/Form.css

@@ -66,7 +66,7 @@ label {
 }
 
 .topic {
-    width: 400px;
+    max-idth: 400px;
     font-family: "DM Sans";
     height: 45px;
     padding: 12px 16px;
@@ -152,19 +152,23 @@ textarea:focus, input:focus, select:focus{
     }
 
     .title {
-        min-width: 303px;
+        min-width: 248px;
+        max-width: 303px;
     }
     
     .topic {
+        min-width: 248px;
         max-width: 303px;
     }
     
     .body {
-        min-width: 303px;
+        min-width: 248px;
+        max-width: 303px;
     }
     
     .username {
-        min-width: 303px;
+        min-width: 248px;
+        max-width: 303px;
     }
 
     .buttonContainer {
@@ -172,3 +176,9 @@ textarea:focus, input:focus, select:focus{
         justify-content: center;
     }
 }
+
+@media only screen and (max-device-width : 320px) {
+    .header {
+        text-align: center;
+    }
+}

src/styles/thread/ListThreads.css

@@ -23,8 +23,10 @@
 
 .tab h3 {
     font-family: "DM Sans";
-    font-size: 1.125rem;
+    font-size: 18px;
     color: #000000;
+    margin-right: 24px;
+    margin-top: 4px;
     opacity: 0.5;
 }
 
@@ -112,4 +114,24 @@
         font-weight: bold;
         opacity: 1!important;
     }
+}
+
+@media only screen and (max-device-width : 320px) {
+    .sub_header_list_threads {
+        flex-wrap: wrap;
+        justify-content: center;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .tab h3 {
+        font-size: 16px;
+        margin-right: 28px;
+        margin-left: 28px;
+        margin-top: 4px;
+    }
+    
+    .recentThreads p, .topThreads p {
+        text-align: center;
+    }
 }
\ No newline at end of file

src/styles/thread/Post.css

@@ -121,7 +121,8 @@ button:focus {
 
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
     #post {
-        min-width: 303px;
+        min-width: 248px;
+        max-width: 303px;
         margin-bottom: 20px;
     }
 

src/styles/thread/PreviewThread.css

@@ -48,19 +48,13 @@ p {
 
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
     #threadCard {
-        min-width: 303px;
+        min-width: 248px;
+        max-width: 303px;
         margin-bottom: 20px;
         padding: 16px;
     }
     
     #topic {
-        background: #DE6600;
-        color:#ffffff;
-        padding: 4px;
-        border-radius: 4px;
-        width: max-content;
-        margin: 24px 0px 0px 0px;
-        border-radius: 4px;
         font-size: 14px;
     }
     
@@ -69,15 +63,6 @@ p {
         margin-left: 20px;
     }
     
-    .fa-thumbs-up {
-        height: 16px;
-        color: #DE6600;
-    }
-    
-    p {
-        color: #000000;
-    }
-    
     #judul {
         font-size: 24px;
         color: #000000;
@@ -90,4 +75,8 @@ p {
     #threadCardContent p{
         margin-bottom: 0px;
     }
+
+    #threadCardContent p{
+        text-align: left;
+    }
 }
\ No newline at end of file

src/styles/thread/Thread.css

@@ -80,8 +80,8 @@ textarea:focus {
 }
 
 .noCommentLabel p {
-    font-size: 16px!important;
-    margin-bottom: 0px!important;
+    font-size: 16px;
+    margin-bottom: 0px;
 }
 
 .commentFormContainer {
@@ -108,7 +108,8 @@ textarea:focus {
     }
 
     .commentBox {
-        min-width: 303px;
+        min-width: 248px;
+        max-width: 303px;
         height: 120px;
         font-size: 14px;
     }
@@ -127,10 +128,4 @@ textarea:focus {
         margin-bottom: 0px;
         text-align: center;
     }
-}
-
-@media only screen and (min-device-width : 1920px) {
-    .commentBox {
-        min-width: 1759px;
-    }
 }
\ No newline at end of file

src/styles/topic/Topic.css

@@ -65,4 +65,15 @@
         margin-left: 36px;
         margin-right: 36px;
     }
+}
+
+@media only screen and (max-device-width : 320px) {
+    .deleteTopicButton {
+        margin-left: 0px;
+        margin-top: 18px;
+    }
+
+    .header h1 {
+        margin-bottom: 36px;
+    }
 }
\ No newline at end of file

src/styles/topic/TopicList.css

@@ -78,4 +78,16 @@
         align-items: center;
         margin-bottom: 24px;
     }
+}
+
+@media only screen and (max-device-width : 320px) {
+    .headerTopic {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .headerTopic h1 {
+        margin-bottom: 36px;
+    }
 }
\ No newline at end of file

src/styles/utility/Button.css

@@ -28,4 +28,10 @@
     .button {
         font-size: 16px;
     }
+}
+
+@media only screen and (max-device-width : 320px) {
+    .button {
+        margin-top: 12px
+    }
 }
\ No newline at end of file

src/styles/utility/Navbar.css

@@ -15,7 +15,7 @@
 }
 
 .form-control {
-    width: 320px;
+    min-width: 320px;
     margin-right: 0px!important;
     border-radius: 0.25rem 0rem 0rem 0.25rem;
     border-color: #FEA02F;
@@ -51,14 +51,22 @@
 
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
     .form-control {
-        width: 300px;
+        min-width: 180px;
+        max-width: 300px;
         margin-right: 0px!important;
         border-radius: 0.25rem 0rem 0rem 0.25rem;
         border-color: #FEA02F;
     }
-
+    
     #logoDiskuy svg {
         width: 120px;
         height: 29.46px;
     }
+}
+
+@media only screen and (max-device-width : 320px) {
+    .form-control {
+        min-width: 180px;
+        max-width: 240px;
+    }
 }
\ No newline at end of file