Fix overflowing text on mobile

static/tailwind.css

@@ -7,7 +7,7 @@ body {
 }
 
 p a {
-  text-decoration: underline
+  @apply break-words underline
 }
 
 .posts {

views/partials/contextComment.hbs

@@ -3,7 +3,7 @@
     <img class="object-cover block w-full h-[300px] sm:w-[120px] sm:h-[140px] rounded-lg rounded-b-none sm:rounded-b-lg" src="{{this.Post.Cover.Url}}" alt="">
     <div class="flex flex-col gap-2 bg-slate-600 p-4 rounded-lg rounded-t-none sm:rounded-t-lg w-full">
       <div class="flex flex-col h-full">
-        <p>{{{this.Comment}}}</p>
+        <p class="md-container">{{{this.Comment}}}</p>
         <div class="flex-grow"></div>
         <div class="flex gap-2">
           <span title="{{this.CreatedAt}}">{{this.RelTime}}</span>

views/post.hbs

@@ -25,7 +25,7 @@
   </header>
   
   <main>
-    <div class="flex gap-4 items-center my-4">
+    <div class="flex flex-col gap-2 md:flex-row md:gap-4 md:items-center my-4">
       {{#if post.User.Username}}
       <a href="/user/{{post.User.Username}}" class="flex gap-2 items-center">
         <img src="{{post.User.Avatar}}" class="rounded-full" width="36" height="36" />