diff --git a/src/components/Comment.svelte b/src/components/Comment.svelte
index e046fd4b9..8165efd2e 100644
--- a/src/components/Comment.svelte
+++ b/src/components/Comment.svelte
@@ -45,7 +45,7 @@
.card {
display: flex;
flex-direction: column;
- padding: 1rem 0;
+ padding: 0.5rem 0;
gap: 0.5rem;
}
.card:not(:last-child) {
@@ -54,7 +54,7 @@
.card-header {
display: flex;
align-items: center;
- padding: 0 0.5rem;
+ padding: 0 0.75rem;
height: 1.5rem;
gap: 0.5rem;
font-size: var(--font-size-small);
@@ -81,19 +81,28 @@
gap: 0.5rem;
}
.card-body {
+ display: flex;
+ align-items: center;
+ min-height: 1.625rem;
word-wrap: break-word;
font-size: var(--font-size-small);
- padding-left: 2rem;
- padding-right: 2rem;
+ padding: 0 2.25rem;
+ }
+ .card-empty-body {
+ padding: 0;
}
.actions {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
- padding-left: 2rem;
+ padding-left: 2.25rem;
margin-left: -0.25rem;
}
+ .timestamp {
+ font-size: var(--font-size-small);
+ color: var(--color-fill-gray);
+ }
.edit-buttons {
display: flex;
gap: 0.25rem;
@@ -104,15 +113,15 @@
}
.connector-line {
width: 1px;
- height: 28px;
+ height: 21px;
position: absolute;
- top: -16px;
+ top: -9px;
left: -1px;
background-color: var(--color-fill-separator);
}
-
- {#if editComment && state !== "read"}
- {@const editComment_ = editComment}
-
{
- state = "submit";
- try {
- await editComment_(comment, Array.from(embeds.values()));
- } finally {
+ {#if body}
+
+ {#if editComment && state !== "read"}
+ {@const editComment_ = editComment}
+ {
+ state = "submit";
+ try {
+ await editComment_(comment, Array.from(embeds.values()));
+ } finally {
+ state = "read";
+ }
+ }}
+ on:close={async () => {
+ body = body;
+ await tick();
state = "read";
- }
- }}
- on:close={async () => {
- body = body;
- await tick();
- state = "read";
- }} />
- {:else if body.trim() === ""}
- No description
- {:else}
-
- {/if}
-
+ }} />
+ {:else}
+
+ {/if}
+
+ {/if}
{#if (id && reactOnComment) || (id && reactions && reactions.length > 0)}
{#if id && reactOnComment}
diff --git a/src/components/ReactionSelector.svelte b/src/components/ReactionSelector.svelte
index 7fb2411b0..6ff2814fe 100644
--- a/src/components/ReactionSelector.svelte
+++ b/src/components/ReactionSelector.svelte
@@ -40,7 +40,7 @@
}
-
+
.action {
border-radius: var(--border-radius-small);
- min-height: 3rem;
+ min-height: 2.5rem;
+ display: flex;
align-items: center;
}
.merge {
@@ -211,17 +212,21 @@
.patch-header {
background-color: var(--color-fill-float);
border-bottom: 1px solid var(--color-fill-separator);
+ border-top: 1px solid var(--color-fill-separator);
display: flex;
flex-direction: column;
- padding-bottom: 1rem;
+ justify-content: center;
+ gap: 0.5rem;
+ min-height: 2.5rem;
+ padding: 0.5rem 0;
font-size: var(--font-size-small);
}
.authorship-header {
display: flex;
align-items: center;
- min-height: 3.5rem;
+ padding: 0 0.75rem;
+ height: 1.5rem;
gap: 0.5rem;
- padding: 0 0.5rem;
font-size: var(--font-size-small);
}
.timestamp {
@@ -240,7 +245,7 @@
display: flex;
flex-direction: column;
font-size: 0.875rem;
- margin-left: 1rem;
+ margin-left: 1.25rem;
gap: 0.5rem;
padding: 1rem 1rem;
border-left: 1px solid var(--color-fill-separator);
@@ -269,7 +274,7 @@
.connector {
width: 1px;
height: 1.5rem;
- margin-left: 1rem;
+ margin-left: 1.25rem;
background-color: var(--color-fill-separator);
}
@@ -382,16 +387,11 @@
{#if expanded}