Quick Fix of Mobile view on profile, event detail pages (#167)

Remove margin on mobile view. Fix Event Descriptions.
HKN-UCSD · May 15, 2024 · cffd0ef · cffd0ef
1 parent a228503
commit cffd0ef
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 6 deletions.
diff --git a/frontend/src/Components/Events/EventDetailContent.svelte b/frontend/src/Components/Events/EventDetailContent.svelte
@@ -38,9 +38,10 @@
     <p>This event can be signed into at any time.</p>
     {/if}
     {#if content}
-    <div class="description" style="display: flex; flex-direction: row">
-        <p style="margin-right: 5px">Description: </p>
-        {@html content}
+    <div class="description">
+        <p>Description: 
+            {@html content}
+        </p>
     </div>
     {/if}
 
@@ -65,5 +66,15 @@
     h1 > a {
         color: black;
     }
-    .description :global(p) { margin-top: 0px; }
+    .description {
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        word-break: break-word;
+    }
+
+    .description p {
+        margin: 0;
+        display: inline;
+    }
+    
 </style>
diff --git a/frontend/src/Components/Navbar.svelte b/frontend/src/Components/Navbar.svelte
@@ -10,7 +10,7 @@
 
   <style>
     .navbar {
-      width: 100%;
+      width: 100vw;
       height: 60px;
       z-index: 100;
       background-color: #333;

diff --git a/frontend/src/Pages/Events/EventDetail.svelte b/frontend/src/Pages/Events/EventDetail.svelte
@@ -200,4 +200,10 @@
     button {
         margin: 5px;
     }
+
+    @media screen and (max-width: 600px) {
+      div {
+         margin:0px;
+      }
+   }
 </style>
diff --git a/frontend/src/Pages/Profile.svelte b/frontend/src/Pages/Profile.svelte
@@ -342,7 +342,8 @@
          display: inline-block
       }
       .container {
-         width: 100%;
+         width:auto;
+
       }
    }
 </style>