Fix overflowing text on mobile
This commit is contained in:
parent
730aead3a1
commit
d490581c44
|
@ -7,7 +7,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
p a {
|
p a {
|
||||||
text-decoration: underline
|
@apply break-words underline
|
||||||
}
|
}
|
||||||
|
|
||||||
.posts {
|
.posts {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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" />
|
||||||
|
|
Loading…
Reference in New Issue