fix(GUI): OPDS catalogs header, wrapping behavior for long feed names/titles (PR #3451 Fixes #3442)

Co-authored-by: Daniel Weck <daniel.weck@gmail.com>

Author: arthur-lemeur

src/renderer/assets/styles/components/catalogs.scss

@@ -276,6 +276,9 @@
     padding: 15px;
     min-height: 40px;
     margin-bottom: 40px;
+    flex-wrap: wrap;
+    z-index: 1000;
+    position: relative;
 
     label {
         background-color: var(--color-gray-50)!important;
@@ -284,6 +287,7 @@
 
     .form_group {
         min-width: 300px;
+        margin-left: auto;
     }
 
     // @media screen and (width <= 1024px) {
@@ -336,8 +340,7 @@
     position: absolute;
     padding-right: 25px;
     margin: 2px;
-    padding-top: 40px;
-    margin-top: 15px;
+    margin-top: 55px;
 
     .button_transparency {
         margin: 4px;

src/renderer/library/components/opds/CatalogHeader.tsx

@@ -20,7 +20,7 @@ export const CatalogHeader: React.FC<React.PropsWithChildren<{ currentLocation:
     const dispatch = useDispatch();
 
     return (
-        <div style={{display: "flex", alignItems: "center", gap: "20px", width: "100%"}}>
+        <div style={{display: "flex", alignItems: "center", gap: "20px"}}>
             {previousLocation ?
             <Link
                 style={{width: "20px", height: "20px", transform: "rotate(180deg)"}}