diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index b8682ffe0..981b6685f 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -342,7 +342,7 @@
⚠️ This functionality requires a lot of attention and extra moderation.
@@ -461,7 +461,7 @@
i18n-labelText labelText="Allow users to do remote URI/handle search"
>
- Add ability for your users to fetch remote videos/actors by their URI, that may not be federated with your instance
+ Allow your users to look up remote videos/actors by their URI, that may not be federated with your instance
@@ -472,7 +472,7 @@
i18n-labelText labelText="Allow anonymous to do remote URI/handle search"
>
- Add ability for anonymous to fetch remote videos/actors by their URI, that may not be federated with your instance
+ Allow anonymous users to look up remote videos/actors by their URI, that may not be federated with your instance
@@ -483,39 +483,46 @@
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 2aab40ea8..982204e21 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -4,18 +4,20 @@
@import '_miniature';
.videos {
+ $column-width: #{$video-thumbnail-width - 25px};
+
display: grid;
column-gap: calc(10px + .2%);
grid-template-columns: repeat(
auto-fill,
minmax(
- var(--miniature-min-width, #{$video-thumbnail-width}),
+ var(--miniature-min-width, #{$column-width}),
1fr
)
);
- @media screen and (min-width: #{breakpoint(xxl)}) {
- --miniature-min-width: 300px;
+ @media screen and (min-width: #{breakpoint(fhd)}) {
+ --miniature-min-width: #{$column-width + 100px};
}
}
@@ -61,12 +63,13 @@
font-weight: $font-semibold;
margin-bottom: 20px;
margin-top: -10px;
- padding-top: 20px;
// make the element span a full grid row within .videos grid
grid-column: 1 / -1;
&:not(:first-child) {
+ margin-top: .5rem;
+ padding-top: 20px;
border-top: 1px solid $separator-border-color;
}
}
diff --git a/client/src/sass/include/_bootstrap-variables.scss b/client/src/sass/include/_bootstrap-variables.scss
index 6aa5c2474..09c58a697 100644
--- a/client/src/sass/include/_bootstrap-variables.scss
+++ b/client/src/sass/include/_bootstrap-variables.scss
@@ -4,6 +4,7 @@ $modal-footer-border-width: 0;
$modal-md: 600px;
$grid-breakpoints: (
+ // CLASSIC BREAKPOINTS GROUP
// Extra small screen / phone
xs: 0,
// Small screen / phone
@@ -14,7 +15,12 @@ $grid-breakpoints: (
lg: 900px,
// Extra large screens / wide desktops
xl: 1200px,
- xxl: 1600px
+ xxl: 1600px,
+
+ // SCREEN GROUP
+ fhd: 1920px,
+ qhd: 2560px,
+ uhd: 3840px
);
@function breakpoint($label) {