diff --git a/src/App.svelte b/src/App.svelte
index 733320e..fef3804 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -52,12 +52,12 @@
Error: {error.message}
{/await}
-
+
{#each posts as postObject}
{/each}
-
+
@@ -129,7 +129,7 @@
margin-top: 5%;
}
#Account {
- width: auto;
+ width: 85%;
padding-left: 5%;
padding-right: 5%;
margin-bottom: 20px;
diff --git a/src/app.css b/src/app.css
index 4c343e2..50da734 100644
--- a/src/app.css
+++ b/src/app.css
@@ -66,6 +66,10 @@ body {
font-size: 24px;
color: var(--text-color);
border-color: var(--border-color);
+ overflow-wrap: break-word;
+ word-wrap: normal;
+ word-break: break-word;
+ hyphens: none;
}
h1 {
@@ -75,6 +79,7 @@ h1 {
#app {
max-width: 1400px;
+ width: 100%;
margin: 0;
padding: 0;
margin-left: auto;
diff --git a/src/lib/AccountComponent.svelte b/src/lib/AccountComponent.svelte
index e324393..880db3f 100644
--- a/src/lib/AccountComponent.svelte
+++ b/src/lib/AccountComponent.svelte
@@ -32,17 +32,18 @@
#accountName {
margin-left: 10px;
font-size: 0.9em;
+ max-width: 80%;
/* replace overflow with ellipsis */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- max-width: 80%;
}
#avatar {
width: 50px;
height: 50px;
margin: 0px;
+ object-fit: cover;
border-right: var(--border-color) 1px solid;
}
diff --git a/src/lib/PostComponent.svelte b/src/lib/PostComponent.svelte
index dc0b874..d140180 100644
--- a/src/lib/PostComponent.svelte
+++ b/src/lib/PostComponent.svelte
@@ -222,13 +222,21 @@
margin-left: 10px;
font-size: 0.9em;
text-align: start;
- overflow-wrap: break-word;
+ word-break: break-word;
+ max-width: 80%;
+ max-height: 95%;
overflow: hidden;
+ align-self: flex-start;
+ margin-top: auto;
+ margin-bottom: auto;
}
#avatar {
- height: 100%;
+ height: 60px;
+ width: 60px;
margin: 0px;
margin-left: 0px;
+ overflow: hidden;
+ object-fit: cover;
border-right: var(--border-color) 1px solid;
}
#carouselContainer {