Fix recordings view for mobile landscape

The events view incorrectly was displaying two columns on landscape view and it only took up 20% of the screen width. Additionally, in landscape view the timeline was too wide (especially on iPads of various screen sizes) and would overlap the main video

docs/docs/frigate/hardware.md

@@ -143,9 +143,10 @@ Inference speeds will vary greatly depending on the GPU and the model used.
 
 With the [rocm](../configuration/object_detectors.md#amdrocm-gpu-detector) detector Frigate can take advantage of many discrete AMD GPUs.
 
-| Name     | YOLOv9 Inference Time | YOLO-NAS Inference Time   |
-| -------- | --------------------- | ------------------------- |
-| AMD 780M | ~ 14 ms               | 320: ~ 30 ms 640: ~ 60 ms |
+| Name      | YOLOv9 Inference Time | YOLO-NAS Inference Time   |
+| --------- | --------------------- | ------------------------- |
+| AMD 780M  | ~ 14 ms               | 320: ~ 30 ms 640: ~ 60 ms |
+| AMD 8700G |                       | 320: ~ 20 ms 640: ~ 40 ms |
 
 ## Community Supported Detectors
 

web/public/locales/en/views/faceLibrary.json

@@ -68,6 +68,7 @@
     "dropInstructions": "Drag and drop an image here, or click to select",
     "maxSize": "Max size: {{size}}MB"
   },
+  "nofaces": "No faces available",
   "readTheDocs": "Read the documentation",
   "trainFaceAs": "Train Face as:",
   "trainFace": "Train Face",

web/src/pages/FaceLibrary.tsx

@@ -390,10 +390,10 @@ export default function FaceLibrary() {
           </div>
         )}
       </div>
-      {pageToggle && faceImages.length === 0 && pageToggle !== "train" ? (
+      {pageToggle && faceImages?.length === 0 && pageToggle !== "train" ? (
         <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
           <LuFolderCheck className="size-16" />
-          No faces available
+          {t("nofaces")}
         </div>
       ) : (
         pageToggle &&

web/src/views/recording/RecordingView.tsx

@@ -819,7 +819,7 @@ function Timeline({
       className={`${
         isDesktop
           ? `${timelineType == "timeline" ? "w-[100px]" : "w-60"} no-scrollbar overflow-y-auto`
-          : "overflow-hidden portrait:flex-grow landscape:w-[20%]"
+          : `overflow-hidden portrait:flex-grow ${timelineType == "timeline" ? "landscape:w-[100px]" : "landscape:w-[175px]"} `
       } relative`}
     >
       <div className="pointer-events-none absolute inset-x-0 top-0 z-20 h-[30px] w-full bg-gradient-to-b from-secondary to-transparent"></div>
@@ -855,7 +855,7 @@ function Timeline({
           <div
             className={cn(
               "scrollbar-container grid h-auto grid-cols-1 gap-4 overflow-auto p-4",
-              isMobile && "sm:grid-cols-2",
+              isMobile && "sm:portrait:grid-cols-2",
             )}
           >
             {mainCameraReviewItems.length === 0 ? (