Lotsa style fixes, and mobile view fix

src/components/composer.js

@@ -44,7 +44,7 @@ export default function Composer({ onSubmit }) {
                 setVal(e.target.value)
               }}
             />
-            <div className={styles.composerAction}>
+            <div className={`actions ${styles.composerAction}`}>
               <span
                 onClick={() => {
                   if (!title) {

src/components/composer.module.css

@@ -1,8 +1,6 @@
 .container {
   display: flex;
   flex-flow: column;
-  max-width: 400px;
-  width: 900px;
 }
 
 .container > input,
@@ -68,25 +66,7 @@
 }
 
 .composerAction {
-  display: flex;
-  align-items: center;
   justify-content: center;
-  width: 36%;
-  height: 100%;
-}
-
-.composerAction > span {
-  margin: 2px 2px;
-  padding: 0px 10px;
-  border: 1px solid #444;
-  border-radius: 5px;
-  cursor: pointer;
-  user-select: none;
-  font-size: 15px;
-  margin-top: 14.5px !important;
-  padding-top: 4px !important;
-  transform: translate(109%, 10%);
-  transition: width 0.5s, height 0.5s, ease-in 0.5s;
 }
 
 .composerAction > span:hover {

src/components/feedbackArea.module.css

@@ -2,7 +2,6 @@
   color: var(--text-color);
   background-color: var(--background-color);
   font-size: 14px;
-  width: 600px;
   box-sizing: border-box;
   height: 150px;
   resize: none;

src/components/layout.module.css

@@ -20,6 +20,7 @@
 }
 
 .sidebarLinks > a {
+  border: 0.5px solid transparent;
   display: block;
   text-align: center;
   color: black;

src/components/modal.module.css

@@ -10,11 +10,9 @@
 
 .modalContent {
   display: flex;
-  align-items: stretch;
+
   max-height: 80%;
-  width: 50%;
-  max-width: 52%;
-  width: auto;
+  width: 70%;
   position: fixed;
   background: var(--background-color);
   height: auto;

src/components/newsEntry.js

@@ -19,16 +19,16 @@ export default function NewsEntry({
   return (
     <div className={styles.newsRoot}>
       <div
-        className={`${styles.newsContainer} ${admin &&
-          styles.adminPost}  ${!admin && styles.userPost}  ${uid == user &&
-          styles.ownPost} ${uid == user && admin && styles.adminPost}`}
+        className={`${styles.newsContainer} ${admin && styles.adminPost}  ${
+          !admin && styles.userPost
+        }  ${uid === user && styles.ownPost} ${
+          uid === user && admin && styles.adminPost
+        }`}
       >
         <div className={styles.newsHeader}>
           <div className={styles.newsTitle}>{title}</div>
-          <div className={styles.userinfo}>
-            <div>User #{user}</div>
-            <div className={styles.newsDate}> @ {date}</div>
-          </div>
+          <div>User #{user}</div>
+          <div className={styles.newsDate}> @ {date}</div>
         </div>
         {admin ? (
           <div

src/components/newsEntry.module.css

@@ -54,6 +54,12 @@
   align-items: center;
 }
 
+@media screen and (max-width: 700px) {
+  .newsHeader {
+    flex-direction: column;
+  }
+}
+
 .userinfo {
   display: flex;
   align-items: center;

src/components/todoStuff/todo.module.css

@@ -4,6 +4,4 @@
 }
 
 .todoButtons {
-  height: 38px;
-  text-wrap: normal; 
 }

src/components/todoStuff/todoTable.module.css

@@ -5,7 +5,6 @@
 }
 
 .table {
-  min-width: 500px;
   justify-content: center;
 }