diff options
| author | Ferdinand Thiessen <opensource@fthiessen.de> | 2024-03-18 19:07:35 +0100 |
|---|---|---|
| committer | Ferdinand Thiessen <opensource@fthiessen.de> | 2024-03-19 19:42:35 +0100 |
| commit | e5906267ff73a438ae2f428e05dd58f5e8068449 (patch) | |
| tree | 26ce58267e64918aa09be43a9e78d0f9ca1c44a9 /apps/settings/src/components | |
| parent | c0a9b59d2695cf47cb0d4f92e2a153aa8d7fbdc0 (diff) | |
| download | nextcloud-server-e5906267ff73a438ae2f428e05dd58f5e8068449.tar.gz nextcloud-server-e5906267ff73a438ae2f428e05dd58f5e8068449.zip | |
fix(settings): Fit media into post type (app discover section)
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Diffstat (limited to 'apps/settings/src/components')
| -rw-r--r-- | apps/settings/src/components/AppStoreDiscover/PostType.vue | 15 |
1 files changed, 13 insertions, 2 deletions
diff --git a/apps/settings/src/components/AppStoreDiscover/PostType.vue b/apps/settings/src/components/AppStoreDiscover/PostType.vue index df4755483f8..626e4e80fe5 100644 --- a/apps/settings/src/components/AppStoreDiscover/PostType.vue +++ b/apps/settings/src/components/AppStoreDiscover/PostType.vue @@ -192,6 +192,7 @@ export default defineComponent({ <style scoped lang="scss"> .app-discover-post { + max-height: 300px; width: 100%; background-color: var(--color-primary-element-light); border-radius: var(--border-radius-rounded); @@ -210,15 +211,20 @@ export default defineComponent({ &__text { display: block; - padding: var(--border-radius-rounded); width: 100%; + padding: var(--border-radius-rounded); + overflow-y: scroll; + } + + // If there is media next to the text we do not want a padding on the bottom as this looks weird when scrolling + &:has(&__media) &__text { + padding-block-end: 0; } &__media { display: block; overflow: hidden; - max-height: 300px; max-width: 450px; border-radius: var(--border-radius-rounded); @@ -262,11 +268,16 @@ export default defineComponent({ @media only screen and (max-width: 699px) { .app-discover-post { flex-direction: column; + max-height: 500px; &--reverse { flex-direction: column-reverse; } + &__text { + flex: 1 1 50%; + } + &__media { min-width: 100%; |