fix(css): cover aspect-ratio and GUI search bar offset and Yes button dark theme (PR #2685 Fixes #2678 Fixes #2683)

Author: arthur-lemeur

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

@@ -115,6 +115,7 @@
         word-break: break-all;
         display: -webkit-inline-box;
         -webkit-line-clamp: 3;
+        line-clamp: 3;
         -webkit-box-orient: vertical;
         overflow: hidden;
         text-align: center;
@@ -532,6 +533,7 @@
     word-break: break-all;
     display: -webkit-inline-box;
     -webkit-line-clamp: 3;
+    line-clamp: 3;
 
     /* autoprefixer: ignore next */
     -webkit-box-orient: vertical;

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

@@ -48,6 +48,11 @@
         .tts_toolbar {
             justify-content: center;
             position: relative;
+
+            @media screen and (width <= 850px) {
+                margin-right: 10px;
+            }
+
         }
 
         .menu_option {

src/renderer/assets/styles/publicationInfos.scss

@@ -56,7 +56,7 @@
         border: 1px solid var(--color-blue);
         height: 25px;
         border-radius: 4px;
-        padding: 2px;
+        padding: 4px;
         width: 100%;
         display: flex;
         align-items: center;
@@ -76,23 +76,27 @@
 }
 
 .publicationInfo_leftSide {
+    // flex: 1;
     flex: 1;
-    max-width: 35%;
     text-align: center;
+    width: 100%;
 
     &_coverWrapper {
-        width: 100%;
-        min-height: 350px;
         position: relative;
-        display: flex;
         align-items: center;
         background-color: var(--color-extralight-grey);
         border: 1px solid var(--color-light-grey);
         border-radius: 6px;
+        margin: auto;
+
+        img {
+            min-height: 250px;
+            height: 100%;
+            min-width: 167px;
+        }
 
           .no_img_wrapper {
-            height: 350px;
-            width: 100%;
+            aspect-ratio: 0.67;
             text-align: center;
             box-sizing: border-box;
             padding: 5%;
@@ -106,16 +110,17 @@
               border: 1px black solid;
               width: 100%;
               height: 100%;
-              line-height: inital;
+              line-height: initial;
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
 
               & p {
-                word-break: break-all;
+                word-break: break-word;
                 display: -webkit-inline-box;
                 -webkit-line-clamp: 3;
+                line-clamp: 3;
                 -webkit-box-orient: vertical;
                 overflow: hidden;
                 text-align: center;
@@ -156,6 +161,7 @@
 
         .book_title {
             font-size: 24px;
+            overflow-wrap: anywhere;
         }
 
         h2 {

src/renderer/common/components/ComboBox.tsx

@@ -25,6 +25,7 @@ export interface MyComboBoxProps<T extends object>
     svg?: ISVGProps;
     refInputEl?: React.Ref<HTMLInputElement>;
     placeholder?: string;
+    customWidth?: number;
 }
 
 // function forwardRef<T extends object>(
@@ -56,17 +57,17 @@ export interface MyComboBoxProps<T extends object>
 // );
 
 export function ComboBox<T extends object>(
-    { label, description, errorMessage, children, svg, refInputEl, placeholder, ...props }: MyComboBoxProps<T>,
+    { label, description, errorMessage, children, svg, refInputEl, placeholder, customWidth, ...props }: MyComboBoxProps<T>,
 ) {
 
     return (
-        <ComboBoxReactAria {...props} className={StylesCombobox.react_aria_ComboBox}>
+        <ComboBoxReactAria {...props} className={StylesCombobox.react_aria_ComboBox} style={{width: customWidth ? `${customWidth + 20}px` : ""}}>
             {
                 label ?
                     <Label className={StylesCombobox.react_aria_Label}>{label}</Label>
                     : <></>
             }
-            <Group className={classNames(StylesCombobox.my_combobox_container, "R2_CSS_CLASS__FORCE_NO_FOCUS_OUTLINE")} >
+            <Group className={classNames(StylesCombobox.my_combobox_container, "R2_CSS_CLASS__FORCE_NO_FOCUS_OUTLINE")} style={{width: customWidth ? `${customWidth}px` : ""}}>
                 {svg ? <SVG ariaHidden svg={svg} /> : <></>}
                 <Input className={classNames(StylesCombobox.react_aria_Input, "R2_CSS_CLASS__FORCE_NO_FOCUS_OUTLINE")} ref={refInputEl} placeholder={placeholder} />
                 {(!props.defaultItems || !!Array(...(props.defaultItems || [])).length) &&

src/renderer/common/components/dialog/publicationInfos/tag/AddTag.tsx

@@ -83,6 +83,7 @@ class AddTag extends React.Component<IProps, IState> {
                         inputValue={this.state.tagName}
                         defaultInputValue={this.state.tagName}
                         aria-labe={__("catalog.addTags")}
+                        customWidth={250}
                     >
                         {item => <ComboBoxItem>{item.name}</ComboBoxItem>}
                     </ComboBox>

src/renderer/reader/components/Reader.tsx

@@ -850,8 +850,9 @@ class Reader extends React.Component<IProps, IState> {
                                             : this.props.readerConfig.readerDockingMode === "right" ? !this.props.readerConfig.paged ? stylesReader.docked_right_scrollable : stylesReader.docked_right_pdf
                                             : ""
                                         ) : undefined,
-                                        (this.props.searchEnable && !this.props.isPdf) ? stylesReader.isOnSearch
-                                        : (this.props.searchEnable && this.props.isPdf) ? stylesReader.isOnSearchPdf
+                                        (this.props.searchEnable && !this.props.isPdf && this.props.readerConfig.paged) ? stylesReader.isOnSearch
+                                        : (this.props.searchEnable && this.props.isPdf) ? stylesReader.isOnSearchPdf :
+                                        (this.props.searchEnable && !this.props.readerConfig.paged) ? stylesReader.isOnSearchScroll
                                         : "")}
                                     ref={this.mainElRef}
                                     style={{ inset: isAudioBook || !this.props.readerConfig.paged || this.props.isPdf || this.props.isDivina ? "0" : "75px 50px" }}>

src/renderer/reader/components/ReaderHeader.tsx

@@ -724,7 +724,7 @@ export class ReaderHeader extends React.Component<IProps, IState> {
                                                     </button>
                                                 </Popover.Trigger>
                                                 <Popover.Portal>
-                                                    <Popover.Content>
+                                                    <Popover.Content style={{zIndex: 100}}>
                                                         <div className={stylesReaderHeader.Tts_popover_container}>
                                                             <div style={{paddingRight: "25px", borderRight: "1px solid var(--color-verylight-grey-alt)"}}>
                                                             <div className={stylesReader.ttsSelectRate}>