style: search bar more responsive

app/Http/Controllers/SearchController.php

@@ -52,7 +52,7 @@ public function search (Request $request): JsonResponse {
         $videos = Video::search($q, function(Indexes $index, $query, $options) {
                 $options['attributesToRetrieve'] = ['title', 'url', 'thumbnail', 'user'];
                 $options['attributesToHighlight'] = ['title', 'user'];
-                $options['attributesToCrop'] = ['title:10'];
+                $options['attributesToCrop'] = ['title:15'];
                 return $index->rawSearch($query, $options);
             })
             ->orderBy('views', 'desc')

app/Models/Video.php

@@ -11,6 +11,7 @@
 use App\Models\Traits\HasReport;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Query\Builder as QueryBuilder;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 use Illuminate\Database\Eloquent\Relations\HasMany;
@@ -279,10 +280,10 @@ protected function languageName(): Attribute
     /**
      * Scope a query to only include active videos.
      *
-     * @param Builder $query
-     * @return Builder
+     * @param QueryBuilder|Builder $query
+     * @return QueryBuilder|Builder
      */
-    public function scopeActive(Builder $query): Builder
+    public function scopeActive(QueryBuilder|Builder $query): QueryBuilder|Builder
     {
         return $query->where('status', VideoStatus::PUBLIC)
             ->whereNotNull('uploaded_at')

resources/js/components/Search.jsx

@@ -80,9 +80,6 @@ export default function Search ({query = '', responsive = true}) {
         }).catch(e => e).finally(() => setLoading(false));
     }, 300), []);
 
-    const width = responsive ? 'w-100 start-0' : 'w-35 rounded-4';
-    const textSize = responsive ? 'text-sm' : '';
-
     return (
         <>
         <form ref={ref} method="GET" className="d-flex w-100 mb-0" role="search" action="/search" onSubmit={handleSubmit}>
@@ -115,7 +112,7 @@ export default function Search ({query = '', responsive = true}) {
         </form>
         {
             (showResults && search.trim() && results.total) ?
-                <div className={'position-absolute ' + width + ' bg-white shadow-lg border border-1 pt-3 rounded-top rounded-bottom'} style={{top:'53px'}}>
+                <div className={clsx('position-absolute bg-white border border-1 pt-3', responsive && 'w-100 start-0', !responsive && 'shadow-lg rounded-top rounded-bottom col-6 col-xl-5 col-xxl-4 rounded-4')} style={{top:'53px'}}>
                     <ul className={'list-unstyled mb-0'}>
                         {
                             results.items.map((result, key) => <ResultItem result={result} key={key} isSelected={selectedIndex === key}/>)

resources/js/components/Video.jsx

@@ -32,7 +32,7 @@ export default function Video ({video}) {
                         <img className="rounded-circle" src={video.user.avatar} alt={video.user.username + ' avatar'} style={{width: '36px'}} />
                     </a>
                     <div className="ml-2">
-                        <a href={video.route} className="fw-bolder text-decoration-none text-black d-block position-relative" title={video.title}>{video.short_title}</a>
+                        <a href={video.route} className="fw-bolder text-decoration-none text-black d-block position-relative text-break" title={video.title}>{video.short_title}</a>
                         <a href={video.user.route} className="position-relative text-decoration-none">
                             <small>{video.user.username}</small>
                         </a>

resources/views/layouts/menus/header.blade.php

@@ -4,14 +4,14 @@
             <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#responsive-sidebar">
                 <span class="navbar-toggler-icon" style="width: 1.2em;height: 1.2em;"></span>
             </button>
-            <a @class(['navbar-brand text-danger fw-bold', 'is-premium' => Auth::user()?->is_premium, 'text-md-center show_sidebar' => $show_sidebar]) href="{{route('pages.home')}}">
+            <a @class(['navbar-brand text-danger fw-bold', 'is-premium' => Auth::user()?->is_premium, 'show_sidebar' => $show_sidebar]) href="{{route('pages.home')}}">
                 {{config('app.name')}} @if(Auth::user()?->is_premium) <span class="text-warning">Premium</span> @endif
             </a>
         </div>
-        <search-bar class="w-35 d-none d-md-block" responsive query="{{request()->get('q')}}"></search-bar>
+        <search-bar class="col-6 col-xl-5 col-xxl-4 d-none d-lg-block" responsive query="{{request()->get('q')}}"></search-bar>
         <ul @class(['navbar-nav flex-row d-flex align-items-center', 'gap-1' => Auth::guest(), 'gap-4' => Auth::check()]) href="{{route('pages.home')}}">
-            <li class="nav-item d-block d-md-none">
-                <button @click="search = true" class="bg-transparent nav-link text-black mr-2">
+            <li class="nav-item d-block d-lg-none">
+                <button @click="search = true" class="bg-transparent nav-link text-black">
                     <i class="fa-solid fa-magnifying-glass"></i>
                 </button>
             </li>

resources/views/playlists/card.blade.php

@@ -17,7 +17,7 @@
         </a>
         <div class="d-flex mt-2">
             <div class="ml-2">
-                <a href="{{$playlist->route}}" class="fw-bolder text-decoration-none text-black d-block position-relative" title="{{$playlist->title}}">
+                <a href="{{$playlist->route}}" class="fw-bolder text-decoration-none text-black d-block position-relative text-break" title="{{$playlist->title}}">
                     {{Str::limit($playlist->title, 69)}}
                 </a>
                 <div class="text-sm text-muted">{{$playlist->created_at->diffForHumans()}}</div>

resources/views/videos/card-secondary.blade.php

@@ -14,7 +14,7 @@
                 <img class="rounded-circle" src="{{$video->user->avatar_url}}" alt="{{$video->user->username}} avatar"  style="width: 36px">
             </a>
             <div>
-                <a href="{{$video->route}}" class="d-block fw-bold position-relative text-decoration-none text-black text-sm mb-1 overflow-hidden" title="{{$video->title}}" style="max-height: 40px">
+                <a href="{{$video->route}}" class="d-block fw-bold position-relative text-decoration-none text-black text-sm mb-1 overflow-hidden text-break" title="{{$video->title}}" style="max-height: 40px">
                     {{Str::limit($video->title, 50)}}
                 </a>
                 <a href="{{$video->user->route}}" class="d-block text-muted position-relative text-decoration-none text-sm" title="{{$video->user->username}}">

resources/views/videos/card.blade.php

@@ -14,7 +14,7 @@
                 <img class="rounded-circle" src="{{$video->user->avatar_url}}" alt="{{$video->user->username}} avatar"  style="width: 36px">
             </a>
             <div class="ml-2">
-                <a href="{{$video->route}}" class="fw-bolder text-decoration-none text-black d-block position-relative" title="{{$video->title}}">{{$video->short_title}}</a>
+                <a href="{{$video->route}}" class="fw-bolder text-decoration-none text-black d-block position-relative text-break" title="{{$video->title}}">{{$video->short_title}}</a>
                 <a href="{{$video->user->route}}" class="position-relative text-decoration-none">
                     <small>{{$video->user->username}}</small>
                 </a>