this repo has no description

CSS text overflow and infinite loading fixes (#4)

Reviewed-on: https://git.witchcraft.systems/scientific-witchery/pds-dash/pulls/4

+20 -6
+3 -3
src/App.svelte
··· 52 52 <p>Error: {error.message}</p> 53 53 {/await} 54 54 55 - <div id="Feed"> 55 + <div id="Feed" property="infinite-wrapper"> 56 56 <div id="spacer"></div> 57 57 {#each posts as postObject} 58 58 <PostComponent post={postObject as Post} /> 59 59 {/each} 60 - <InfiniteLoading on:infinite={onInfinite} distance={3000} /> 60 + <InfiniteLoading on:infinite={onInfinite} distance={3000} forceUseInfiniteWrapper=true /> 61 61 <div id="spacer"></div> 62 62 </div> 63 63 </div> ··· 129 129 margin-top: 5%; 130 130 } 131 131 #Account { 132 - width: auto; 132 + width: 85%; 133 133 padding-left: 5%; 134 134 padding-right: 5%; 135 135 margin-bottom: 20px;
+5
src/app.css
··· 66 66 font-size: 24px; 67 67 color: var(--text-color); 68 68 border-color: var(--border-color); 69 + overflow-wrap: break-word; 70 + word-wrap: normal; 71 + word-break: break-word; 72 + hyphens: none; 69 73 } 70 74 71 75 h1 { ··· 75 79 76 80 #app { 77 81 max-width: 1400px; 82 + width: 100%; 78 83 margin: 0; 79 84 padding: 0; 80 85 margin-left: auto;
+2 -1
src/lib/AccountComponent.svelte
··· 32 32 #accountName { 33 33 margin-left: 10px; 34 34 font-size: 0.9em; 35 + max-width: 80%; 35 36 36 37 /* replace overflow with ellipsis */ 37 38 overflow: hidden; 38 39 text-overflow: ellipsis; 39 40 white-space: nowrap; 40 - max-width: 80%; 41 41 } 42 42 #avatar { 43 43 width: 50px; 44 44 height: 50px; 45 45 margin: 0px; 46 + object-fit: cover; 46 47 border-right: var(--border-color) 1px solid; 47 48 } 48 49 </style>
+10 -2
src/lib/PostComponent.svelte
··· 222 222 margin-left: 10px; 223 223 font-size: 0.9em; 224 224 text-align: start; 225 - overflow-wrap: break-word; 225 + word-break: break-word; 226 + max-width: 80%; 227 + max-height: 95%; 226 228 overflow: hidden; 229 + align-self: flex-start; 230 + margin-top: auto; 231 + margin-bottom: auto; 227 232 } 228 233 #avatar { 229 - height: 100%; 234 + height: 60px; 235 + width: 60px; 230 236 margin: 0px; 231 237 margin-left: 0px; 238 + overflow: hidden; 239 + object-fit: cover; 232 240 border-right: var(--border-color) 1px solid; 233 241 } 234 242 #carouselContainer {