Fix overflowing text on mobile

This commit is contained in:
video-prize-ranch 2023-08-16 11:07:32 -04:00
parent 730aead3a1
commit d490581c44
No known key found for this signature in database
3 changed files with 3 additions and 3 deletions

View File

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

View File

@ -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=""> <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 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"> <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-grow"></div>
<div class="flex gap-2"> <div class="flex gap-2">
<span title="{{this.CreatedAt}}">{{this.RelTime}}</span> <span title="{{this.CreatedAt}}">{{this.RelTime}}</span>

View File

@ -25,7 +25,7 @@
</header> </header>
<main> <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}} {{#if post.User.Username}}
<a href="/user/{{post.User.Username}}" class="flex gap-2 items-center"> <a href="/user/{{post.User.Username}}" class="flex gap-2 items-center">
<img src="{{post.User.Avatar}}" class="rounded-full" width="36" height="36" /> <img src="{{post.User.Avatar}}" class="rounded-full" width="36" height="36" />