From d490581c44f81a8c4fce64bf210d21587e6ce762 Mon Sep 17 00:00:00 2001
From: video-prize-ranch <cb.8a3w5@simplelogin.co>
Date: Wed, 16 Aug 2023 11:07:32 -0400
Subject: [PATCH] Fix overflowing text on mobile

---
 static/tailwind.css               | 2 +-
 views/partials/contextComment.hbs | 2 +-
 views/post.hbs                    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/static/tailwind.css b/static/tailwind.css
index dfb7445..84e7abf 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -7,7 +7,7 @@ body {
 }
 
 p a {
-  text-decoration: underline
+  @apply break-words underline
 }
 
 .posts {
diff --git a/views/partials/contextComment.hbs b/views/partials/contextComment.hbs
index f559e48..a62e564 100644
--- a/views/partials/contextComment.hbs
+++ b/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>
diff --git a/views/post.hbs b/views/post.hbs
index 00b79f9..a41ad82 100644
--- a/views/post.hbs
+++ b/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" />