scientific-witchery/pds-dash
3
0
Fork 0
Code Issues 1 Pull requests 1 Projects 1 Releases Packages Wiki Activity Actions

CSS text overflow and infinite loading fixes (#4)
All checks were successful
Deploy / Deploy (push) Successful in 41s
Details

Browse source 
Reviewed-on: #4
This commit is contained in:
Astra 2025-05-10 09:14:50 +00:00
parent 614f2b4c30
commit a495f724b9
4 changed files with 20 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/App.svelte
View file

@ -52,12 +52,12 @@
<p>Error: {error.message}</p> <p>Error: {error.message}</p>
{/await} {/await}
<div id="Feed"> <div id="Feed" property="infinite-wrapper">
<div id="spacer"></div> <div id="spacer"></div>
{#each posts as postObject} {#each posts as postObject}
<PostComponent post={postObject as Post} /> <PostComponent post={postObject as Post} />
{/each} {/each}
<InfiniteLoading on:infinite={onInfinite} distance={3000} /> <InfiniteLoading on:infinite={onInfinite} distance={3000} forceUseInfiniteWrapper=true />
<div id="spacer"></div> <div id="spacer"></div>
</div> </div>
</div> </div>
@ -129,7 +129,7 @@
margin-top: 5%; margin-top: 5%;
} }
#Account { #Account {
width: auto; width: 85%;
padding-left: 5%; padding-left: 5%;
padding-right: 5%; padding-right: 5%;
margin-bottom: 20px; margin-bottom: 20px;

5
src/app.css
View file

@ -66,6 +66,10 @@ body {
font-size: 24px; font-size: 24px;
color: var(--text-color); color: var(--text-color);
border-color: var(--border-color); border-color: var(--border-color);
overflow-wrap: break-word;
word-wrap: normal;
word-break: break-word;
hyphens: none;
} }
h1 { h1 {
@ -75,6 +79,7 @@ h1 {
#app { #app {
max-width: 1400px; max-width: 1400px;
width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
margin-left: auto; margin-left: auto;

3
src/lib/AccountComponent.svelte
View file

@ -32,17 +32,18 @@
#accountName { #accountName {
margin-left: 10px; margin-left: 10px;
font-size: 0.9em; font-size: 0.9em;
max-width: 80%;
/* replace overflow with ellipsis */ /* replace overflow with ellipsis */
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
max-width: 80%;
} }
#avatar { #avatar {
width: 50px; width: 50px;
height: 50px; height: 50px;
margin: 0px; margin: 0px;
object-fit: cover;
border-right: var(--border-color) 1px solid; border-right: var(--border-color) 1px solid;
} }
</style> </style>

12
src/lib/PostComponent.svelte
View file

@ -222,13 +222,21 @@
margin-left: 10px; margin-left: 10px;
font-size: 0.9em; font-size: 0.9em;
text-align: start; text-align: start;
overflow-wrap: break-word; word-break: break-word;
max-width: 80%;
max-height: 95%;
overflow: hidden; overflow: hidden;
align-self: flex-start;
margin-top: auto;
margin-bottom: auto;
} }
#avatar { #avatar {
height: 100%; height: 60px;
width: 60px;
margin: 0px; margin: 0px;
margin-left: 0px; margin-left: 0px;
overflow: hidden;
object-fit: cover;
border-right: var(--border-color) 1px solid; border-right: var(--border-color) 1px solid;
} }
#carouselContainer { #carouselContainer {