smaller miniature average size in fluid grid, updated admin instructions for global search

client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html

@@ -342,7 +342,7 @@
               <div class="form-group">
                 <my-peertube-checkbox
                   inputName="signupEnabled" formControlName="enabled"
-                  i18n-labelText labelText="Signup enabled"
+                  i18n-labelText labelText="Enable Signup"
                 >
                   <ng-container ngProjectAs="description">
                     <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
@@ -461,7 +461,7 @@
                     i18n-labelText labelText="Allow users to do remote URI/handle search"
                   >
                     <ng-container ngProjectAs="description">
-                      <span i18n>Add ability for <strong>your users</strong> to fetch remote videos/actors by their URI, that may not be federated with your instance</span>
+                      <span i18n>Allow <strong>your users</strong> to look up remote videos/actors by their URI, that may not be federated with your instance</span>
                     </ng-container>
                   </my-peertube-checkbox>
                 </div>
@@ -472,7 +472,7 @@
                     i18n-labelText labelText="Allow anonymous to do remote URI/handle search"
                   >
                     <ng-container ngProjectAs="description">
-                      <span i18n>Add ability for <strong>anonymous</strong> to fetch remote videos/actors by their URI, that may not be federated with your instance</span>
+                      <span i18n>Allow <strong>anonymous users</strong> to look up remote videos/actors by their URI, that may not be federated with your instance</span>
                     </ng-container>
                   </my-peertube-checkbox>
                 </div>
@@ -483,8 +483,15 @@
                 <div class="form-group">
                   <my-peertube-checkbox
                     inputName="searchIndexEnabled" formControlName="enabled"
-                    i18n-labelText labelText="Enable search index"
+                    i18n-labelText labelText="Enable global search"
                   >
+                    <ng-container ngProjectAs="description">
+                      <p i18n>⚠️ This functionality depends heavily on the moderation of instances followed by the search index you select.</p>
+
+                      <span i18n>
+                        You should only use search indexes you trust, or <a href="https://framagit.org/framasoft/peertube/search-index">host your own</a>.
+                      </span>
+                    </ng-container>
 
                     <ng-container ngProjectAs="extra">
                       <div [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }">
@@ -499,17 +506,17 @@
                       <div class="mt-3">
                         <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }"
                           inputName="searchIndexDisableLocalSearch" formControlName="disableLocalSearch"
-                        i18n-labelText labelText="Disable local search"
+                          i18n-labelText labelText="Disable local search in search bar"
                         ></my-peertube-checkbox>
                       </div>
 
                       <div class="mt-3">
                         <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }"
                           inputName="searchIndexIsDefaultSearch" formControlName="isDefaultSearch"
-                        i18n-labelText labelText="Set search index as default"
+                          i18n-labelText labelText="Search bar uses the global search index by default"
                         >
                           <ng-container ngProjectAs="description">
-                          <span i18n>The local search is used by default</span>
+                            <span i18n>Otherwise the local search stays used by default</span>
                           </ng-container>
                         </my-peertube-checkbox>
                       </div>

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)}) {
+  @media screen and (min-width: #{breakpoint(fhd)}) {
-    --miniature-min-width: 300px;
+    --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;
   }
 }

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) {