patch: sizing and overflow issues on homework item text

Author: InfinityLoop1

public/assets/styles/css/list.css

@@ -15,37 +15,49 @@
     #uncompleted-homework,
     #completed-homework {
         div {
-            height: 60px;
+            min-height: 60px;
             display: flex;
             flex-direction: row;
-            align-items: center;
+            align-items: space-between;
+            gap: 10px;
             padding: 10px;
             border-bottom: 1px solid $border-color;
             background-color: $background-card;
             color: $text-primary;
+            justify-items: center;
 
             div {
                 display: flex;
                 flex-direction: column;
                 text-align: left;
-                align-items: flex-start;
-                justify-content: flex-start;
                 border: 0;
                 padding: 0;
-                padding-top: 10px;
-                padding-left: 10px;
+                width: 100%;
+                margin: 0;
+                box-sizing: border-box;
+                
+                
+                
 
                 p,
                 strong {
                     text-align: left;
+                    width: 100%;
                 }
             }
 
             p,
             strong,
             div {
+                margin: auto 0;
                 width: calc((100% - 25px) / 3);
                 text-align: center;
+                overflow: hidden;
+            }
+
+            p, strong {
+                white-space: wrap;
+                text-overflow: ellipsis;
             }
 
             button {
@@ -59,7 +71,7 @@
                 color: white;
                 font-size: 1rem;
                 font-weight: 900;
-                margin: 5px;
+                margin: auto 0;
                 display: flex;
                 align-items: center;
                 justify-content: center;