From 520b3add0f8597c79706812c4819fb23a551becc Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 25 Aug 2022 15:01:44 +0530
Subject: [PATCH] fix: editor content being hidden under keyboard on mobile
 (#1410)

---
 packages/web/src/javascripts/App.tsx          | 17 ++---------
 .../ComponentView/ComponentView.tsx           |  3 +-
 .../ContentListView/ContentList.tsx           |  4 +--
 .../ContentListView/ContentListView.tsx       |  2 +-
 .../Components/Navigation/Navigation.tsx      |  6 +++-
 .../NoteView/AutoresizingTextarea.tsx         | 30 +++++++++++++++++++
 .../Components/NoteView/NoteView.tsx          |  8 ++---
 .../Popover/PositionedPopoverContent.tsx      |  5 ++++
 .../Preferences/PreferencesView.tsx           |  9 +++++-
 .../Components/Shared/ModalDialogButtons.tsx  |  6 ++--
 .../src/javascripts/Constants/ElementIDs.ts   |  3 +-
 .../Hooks/useDisableBodyScrollOnMobile.tsx    | 27 +++++++++++++++++
 .../web/src/javascripts/Utils/IsMobile.ts     | 28 -----------------
 packages/web/src/javascripts/Utils/Utils.ts   | 13 ++++++--
 packages/web/src/javascripts/Utils/index.ts   |  1 -
 packages/web/src/stylesheets/_columns.scss    |  1 -
 packages/web/src/stylesheets/_editor.scss     |  3 +-
 packages/web/src/stylesheets/_main.scss       | 30 ++++++++++++-------
 18 files changed, 124 insertions(+), 72 deletions(-)
 create mode 100644 packages/web/src/javascripts/Components/NoteView/AutoresizingTextarea.tsx
 create mode 100644 packages/web/src/javascripts/Hooks/useDisableBodyScrollOnMobile.tsx
 delete mode 100644 packages/web/src/javascripts/Utils/IsMobile.ts

diff --git a/packages/web/src/javascripts/App.tsx b/packages/web/src/javascripts/App.tsx
index 261a276a7..f7df52568 100644
--- a/packages/web/src/javascripts/App.tsx
+++ b/packages/web/src/javascripts/App.tsx
@@ -34,18 +34,13 @@ import { ApplicationGroup } from './Application/ApplicationGroup'
 import { WebOrDesktopDevice } from './Application/Device/WebOrDesktopDevice'
 import { WebApplication } from './Application/Application'
 import { createRoot, Root } from 'react-dom/client'
+import { ElementIds } from './Constants/ElementIDs'
 
 let keyCount = 0
 const getKey = () => {
   return keyCount++
 }
 
-const RootId = 'app-group-root'
-
-const setViewportHeight = () => {
-  document.documentElement.style.setProperty('--viewport-height', `${window.innerHeight}px`)
-}
-
 const startApplication: StartApplication = async function startApplication(
   defaultSyncServerHost: string,
   device: WebOrDesktopDevice,
@@ -58,24 +53,18 @@ const startApplication: StartApplication = async function startApplication(
   let root: Root
 
   const onDestroy = () => {
-    const rootElement = document.getElementById(RootId) as HTMLElement
+    const rootElement = document.getElementById(ElementIds.RootId) as HTMLElement
     root.unmount()
     rootElement.remove()
-    window.removeEventListener('resize', setViewportHeight)
-    window.removeEventListener('orientationchange', setViewportHeight)
     renderApp()
   }
 
   const renderApp = () => {
     const rootElement = document.createElement('div')
-    rootElement.id = RootId
+    rootElement.id = ElementIds.RootId
     const appendedRootNode = document.body.appendChild(rootElement)
     root = createRoot(appendedRootNode)
 
-    setViewportHeight()
-    window.addEventListener('resize', setViewportHeight)
-    window.addEventListener('orientationchange', setViewportHeight)
-
     disableIosTextFieldZoom()
 
     root.render(
diff --git a/packages/web/src/javascripts/Components/ComponentView/ComponentView.tsx b/packages/web/src/javascripts/Components/ComponentView/ComponentView.tsx
index 7407c01dd..1d271d06f 100644
--- a/packages/web/src/javascripts/Components/ComponentView/ComponentView.tsx
+++ b/packages/web/src/javascripts/Components/ComponentView/ComponentView.tsx
@@ -33,7 +33,7 @@ const VisibilityChangeKey = 'visibilitychange'
 const MSToWaitAfterIframeLoadToAvoidFlicker = 35
 
 const ComponentView: FunctionComponent<IProps> = ({ application, onLoad, componentViewer, requestReload }) => {
-  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const iframeRef = useRef<HTMLIFrameElement | null>(null)
   const [loadTimeout, setLoadTimeout] = useState<ReturnType<typeof setTimeout> | undefined>(undefined)
 
   const [hasIssueLoading, setHasIssueLoading] = useState(false)
@@ -200,6 +200,7 @@ const ComponentView: FunctionComponent<IProps> = ({ application, onLoad, compone
       {error === ComponentViewerError.MissingUrl && <UrlMissing componentName={component.displayName} />}
       {component.uuid && isComponentValid && (
         <iframe
+          className="min-h-[40rem]"
           ref={iframeRef}
           onLoad={onIframeLoad}
           data-component-viewer-id={componentViewer.identifier}
diff --git a/packages/web/src/javascripts/Components/ContentListView/ContentList.tsx b/packages/web/src/javascripts/Components/ContentListView/ContentList.tsx
index 2e4106930..4c0dbb5c0 100644
--- a/packages/web/src/javascripts/Components/ContentListView/ContentList.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ContentList.tsx
@@ -68,8 +68,8 @@ const ContentList: FunctionComponent<Props> = ({
   return (
     <div
       className={classNames(
-        'infinite-scroll overflow-y-auto overflow-x-hidden focus:shadow-none focus:outline-none',
-        'md:overflow-y-hidden md:hover:overflow-y-auto',
+        'infinite-scroll max-h-[75vh] overflow-y-auto overflow-x-hidden focus:shadow-none focus:outline-none',
+        'md:max-h-full md:overflow-y-hidden md:hover:overflow-y-auto',
         'md:hover:[overflow-y:_overlay]',
       )}
       id={ElementIds.ContentList}
diff --git a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
index 55a50a0b5..418942e71 100644
--- a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
@@ -191,7 +191,7 @@ const ContentListView: FunctionComponent<Props> = ({
       aria-label={'Notes & Files'}
       ref={itemsViewPanelRef}
     >
-      <ResponsivePaneContent paneId={AppPaneId.Items}>
+      <ResponsivePaneContent paneId={AppPaneId.Items} contentClassName="min-h-[85vh]">
         <div id="items-title-bar" className="section-title-bar border-b border-solid border-border">
           <div id="items-title-bar-container">
             <input
diff --git a/packages/web/src/javascripts/Components/Navigation/Navigation.tsx b/packages/web/src/javascripts/Components/Navigation/Navigation.tsx
index 83392f4e2..fa204c67a 100644
--- a/packages/web/src/javascripts/Components/Navigation/Navigation.tsx
+++ b/packages/web/src/javascripts/Components/Navigation/Navigation.tsx
@@ -51,7 +51,11 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
       className={'sn-component section app-column w-[220px] xsm-only:!w-full sm-only:!w-full'}
       ref={ref}
     >
-      <ResponsivePaneContent paneId={AppPaneId.Navigation} contentElementId="navigation-content">
+      <ResponsivePaneContent
+        paneId={AppPaneId.Navigation}
+        contentElementId="navigation-content"
+        contentClassName="min-h-[85vh]"
+      >
         <div className={'section-title-bar'}>
           <div className="section-title-bar-header">
             <div className="title text-sm">
diff --git a/packages/web/src/javascripts/Components/NoteView/AutoresizingTextarea.tsx b/packages/web/src/javascripts/Components/NoteView/AutoresizingTextarea.tsx
new file mode 100644
index 000000000..ba74b2f1d
--- /dev/null
+++ b/packages/web/src/javascripts/Components/NoteView/AutoresizingTextarea.tsx
@@ -0,0 +1,30 @@
+import { classNames } from '@/Utils/ConcatenateClassNames'
+import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react'
+
+// Based on: https://css-tricks.com/auto-growing-inputs-textareas/#aa-other-ideas
+const AutoresizingNoteViewTextarea = forwardRef(
+  ({ value, ...textareaProps }: ComponentPropsWithoutRef<'textarea'>, ref: ForwardedRef<HTMLTextAreaElement>) => {
+    return (
+      <div className="relative inline-grid min-h-[75vh] w-full grid-rows-1 items-stretch md:block md:flex-grow">
+        <pre
+          id="textarea-mobile-resizer"
+          className={classNames(
+            'editable font-editor break-word whitespace-pre-wrap',
+            'invisible [grid-area:1_/_1] md:hidden',
+          )}
+          aria-hidden
+        >
+          {value}{' '}
+        </pre>
+        <textarea
+          value={value}
+          className="editable font-editor [grid-area:1_/_1] md:h-full md:min-h-0"
+          {...textareaProps}
+          ref={ref}
+        ></textarea>
+      </div>
+    )
+  },
+)
+
+export default AutoresizingNoteViewTextarea
diff --git a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
index 935c32c5d..d239201c0 100644
--- a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
@@ -37,6 +37,7 @@ import { reloadFont } from './FontFunctions'
 import { NoteViewProps } from './NoteViewProps'
 import IndicatorCircle from '../IndicatorCircle/IndicatorCircle'
 import { classNames } from '@/Utils/ConcatenateClassNames'
+import AutoresizingNoteViewTextarea from './AutoresizingTextarea'
 
 const MINIMUM_STATUS_DURATION = 400
 const TEXTAREA_DEBOUNCE = 100
@@ -889,7 +890,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
 
     return (
       <div aria-label="Note" className="section editor sn-component">
-        <div className="flex flex-grow flex-col">
+        <div className="flex-grow flex-col md:flex">
           {this.state.noteLocked && (
             <EditingDisabledBanner
               onMouseLeave={() => {
@@ -1021,9 +1022,8 @@ class NoteView extends PureComponent<NoteViewProps, State> {
             )}
 
             {this.state.editorStateDidLoad && !this.state.editorComponentViewer && !this.state.textareaUnloading && (
-              <textarea
+              <AutoresizingNoteViewTextarea
                 autoComplete="off"
-                className="editable font-editor"
                 dir="auto"
                 id={ElementIds.NoteTextEditor}
                 onChange={this.onTextAreaChange}
@@ -1032,7 +1032,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
                 onFocus={this.onContentFocus}
                 spellCheck={this.state.spellcheck}
                 ref={(ref) => ref && this.onSystemEditorLoad(ref)}
-              ></textarea>
+              />
             )}
 
             {this.state.marginResizersEnabled && this.editorContentRef.current ? (
diff --git a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
index b0194c78e..e262971ad 100644
--- a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
+++ b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
@@ -9,6 +9,8 @@ import { getPositionedPopoverStyles } from './GetPositionedPopoverStyles'
 import { PopoverContentProps } from './Types'
 import { getPopoverMaxHeight, getAppRect } from './Utils/Rect'
 import { usePopoverCloseOnClickOutside } from './Utils/usePopoverCloseOnClickOutside'
+import { fitNodeToMobileScreen } from '@/Utils'
+import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobile'
 
 const PositionedPopoverContent = ({
   align = 'end',
@@ -49,6 +51,8 @@ const PositionedPopoverContent = ({
     childPopovers,
   })
 
+  useDisableBodyScrollOnMobile()
+
   return (
     <Portal>
       <div
@@ -63,6 +67,7 @@ const PositionedPopoverContent = ({
         }}
         ref={(node) => {
           setPopoverElement(node)
+          fitNodeToMobileScreen(node)
         }}
         data-popover={id}
       >
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx
index 0f50d84b2..54f5cbd77 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx
@@ -4,6 +4,8 @@ import { observer } from 'mobx-react-lite'
 import { PreferencesMenu } from './PreferencesMenu'
 import PreferencesCanvas from './PreferencesCanvas'
 import { PreferencesProps } from './PreferencesProps'
+import { fitNodeToMobileScreen } from '@/Utils'
+import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobile'
 
 const PreferencesView: FunctionComponent<PreferencesProps> = (props) => {
   const menu = useMemo(
@@ -25,8 +27,13 @@ const PreferencesView: FunctionComponent<PreferencesProps> = (props) => {
     }
   }, [props, menu])
 
+  useDisableBodyScrollOnMobile()
+
   return (
-    <div className="absolute top-0 left-0 z-preferences flex h-full w-full flex-col bg-contrast">
+    <div
+      className="absolute top-0 left-0 z-preferences flex h-full max-h-screen w-full flex-col bg-contrast"
+      ref={fitNodeToMobileScreen}
+    >
       <div className="flex w-full flex-row items-center justify-between border-b border-solid border-border bg-default px-3 py-2 md:p-3">
         <div className="hidden h-8 w-8 md:block" />
         <h1 className="text-base font-bold md:text-lg">Your preferences for Standard Notes</h1>
diff --git a/packages/web/src/javascripts/Components/Shared/ModalDialogButtons.tsx b/packages/web/src/javascripts/Components/Shared/ModalDialogButtons.tsx
index ad5a4326f..4785718b3 100644
--- a/packages/web/src/javascripts/Components/Shared/ModalDialogButtons.tsx
+++ b/packages/web/src/javascripts/Components/Shared/ModalDialogButtons.tsx
@@ -1,5 +1,5 @@
 import { classNames } from '@/Utils/ConcatenateClassNames'
-import { FunctionComponent } from 'react'
+import { Fragment, FunctionComponent } from 'react'
 
 type Props = {
   className?: string
@@ -11,10 +11,10 @@ const ModalDialogButtons: FunctionComponent<Props> = ({ children, className }) =
     <div className={classNames('flex items-center justify-end px-4 py-4', className)}>
       {children != undefined && Array.isArray(children)
         ? children.map((child, idx, arr) => (
-            <>
+            <Fragment key={idx}>
               {child}
               {idx < arr.length - 1 ? <div className="min-w-3" /> : undefined}
-            </>
+            </Fragment>
           ))
         : children}
     </div>
diff --git a/packages/web/src/javascripts/Constants/ElementIDs.ts b/packages/web/src/javascripts/Constants/ElementIDs.ts
index 3338b7a42..98fbe1e85 100644
--- a/packages/web/src/javascripts/Constants/ElementIDs.ts
+++ b/packages/web/src/javascripts/Constants/ElementIDs.ts
@@ -8,4 +8,5 @@ export const ElementIds = {
   NavigationColumn: 'navigation',
   NoteTextEditor: 'note-text-editor',
   NoteTitleEditor: 'note-title-editor',
-}
+  RootId: 'app-group-root',
+} as const
diff --git a/packages/web/src/javascripts/Hooks/useDisableBodyScrollOnMobile.tsx b/packages/web/src/javascripts/Hooks/useDisableBodyScrollOnMobile.tsx
new file mode 100644
index 000000000..b90777bbb
--- /dev/null
+++ b/packages/web/src/javascripts/Hooks/useDisableBodyScrollOnMobile.tsx
@@ -0,0 +1,27 @@
+import { isMobileScreen } from '@/Utils'
+import { useEffect, useRef } from 'react'
+
+/**
+ * Used to disable scroll on document.body when opening popovers or preferences view
+ * on mobile so that user can only scroll within the popover or prefs view
+ */
+export const useDisableBodyScrollOnMobile = () => {
+  const styleElementRef = useRef<HTMLStyleElement | null>(null)
+
+  useEffect(() => {
+    const isMobile = isMobileScreen()
+
+    if (isMobile && !styleElementRef.current) {
+      const styleElement = document.createElement('style')
+      styleElement.textContent = 'body { overflow: hidden; }'
+      document.body.appendChild(styleElement)
+      styleElementRef.current = styleElement
+    }
+
+    return () => {
+      if (isMobile && styleElementRef.current) {
+        styleElementRef.current.remove()
+      }
+    }
+  }, [])
+}
diff --git a/packages/web/src/javascripts/Utils/IsMobile.ts b/packages/web/src/javascripts/Utils/IsMobile.ts
deleted file mode 100644
index 96912dd51..000000000
--- a/packages/web/src/javascripts/Utils/IsMobile.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * source: https://github.com/juliangruber/is-mobile
- *
- * (MIT)
- * Copyright (c) 2013 Julian Gruber <julian@juliangruber.com>
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
- * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-const mobileRE =
-  /(android|bb\d+|meego).+mobile|armv7l|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series[46]0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i
-
-const tabletRE = /android|ipad|playbook|silk/i
-
-export type Opts = {
-  tablet?: boolean
-}
-
-export const isMobile = (opts: Opts = {}) => {
-  const ua = navigator.userAgent || navigator.vendor
-
-  if (typeof ua !== 'string') {
-    return false
-  }
-
-  return mobileRE.test(ua) || (!!opts.tablet && tabletRE.test(ua))
-}
diff --git a/packages/web/src/javascripts/Utils/Utils.ts b/packages/web/src/javascripts/Utils/Utils.ts
index d3b605081..f025fab20 100644
--- a/packages/web/src/javascripts/Utils/Utils.ts
+++ b/packages/web/src/javascripts/Utils/Utils.ts
@@ -2,8 +2,6 @@ import { Platform, platformFromString } from '@standardnotes/snjs'
 import { IsDesktopPlatform, IsWebPlatform } from '@/Constants/Version'
 import { EMAIL_REGEX } from '../Constants/Constants'
 
-export { isMobile } from './IsMobile'
-
 declare const process: {
   env: {
     NODE_ENV: string | null | undefined
@@ -203,3 +201,14 @@ export const disableIosTextFieldZoom = () => {
     addMaximumScaleToMetaViewport()
   }
 }
+
+export const isMobileScreen = () => !window.matchMedia('(min-width: 768px)').matches
+
+export const fitNodeToMobileScreen = (node: HTMLElement | null) => {
+  if (!node || !isMobileScreen()) {
+    return
+  }
+  node.style.height = `${visualViewport.height}px`
+  node.style.position = 'absolute'
+  node.style.top = `${document.documentElement.scrollTop}px`
+}
diff --git a/packages/web/src/javascripts/Utils/index.ts b/packages/web/src/javascripts/Utils/index.ts
index a28985cb0..7a60067c8 100644
--- a/packages/web/src/javascripts/Utils/index.ts
+++ b/packages/web/src/javascripts/Utils/index.ts
@@ -1,4 +1,3 @@
 export * from './ConcatenateUint8Arrays'
-export * from './IsMobile'
 export * from './StringUtils'
 export * from './Utils'
diff --git a/packages/web/src/stylesheets/_columns.scss b/packages/web/src/stylesheets/_columns.scss
index b6040abd0..db7f083cd 100644
--- a/packages/web/src/stylesheets/_columns.scss
+++ b/packages/web/src/stylesheets/_columns.scss
@@ -21,7 +21,6 @@
       flex-grow: 1;
 
       .content {
-        height: 100%;
         overflow-y: auto;
       }
     }
diff --git a/packages/web/src/stylesheets/_editor.scss b/packages/web/src/stylesheets/_editor.scss
index 9bdf0d3f4..c513dba74 100644
--- a/packages/web/src/stylesheets/_editor.scss
+++ b/packages/web/src/stylesheets/_editor.scss
@@ -9,6 +9,7 @@ $heading-height: 75px;
 .section.editor {
   display: flex;
   flex-direction: column;
+  flex-grow: 1;
   overflow-y: hidden;
   background-color: var(--editor-background-color);
   color: var(--editor-foreground-color);
@@ -95,8 +96,6 @@ $heading-height: 75px;
 .editor-content,
 #editor-content {
   flex: 1;
-  overflow-y: hidden;
-  height: 100%;
   display: flex;
   tab-size: 2;
   background-color: var(--editor-pane-background-color);
diff --git a/packages/web/src/stylesheets/_main.scss b/packages/web/src/stylesheets/_main.scss
index 3c14f449c..432c54a7a 100644
--- a/packages/web/src/stylesheets/_main.scss
+++ b/packages/web/src/stylesheets/_main.scss
@@ -41,8 +41,6 @@ body {
   -moz-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  min-height: 100%;
-  height: 100%;
   line-height: normal;
   margin: 0;
 }
@@ -107,16 +105,30 @@ p {
   margin: 0;
 }
 
+html,
+body,
+.main-ui-view {
+  height: max-content;
+  min-height: 0;
+  max-height: none;
+
+  display: block;
+
+  @media screen and (min-width: 768px) {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
 .main-ui-view {
-  // Fallbacks
-  min-height: 100vh;
-  height: 100vh;
-  // Mobile-corrected viewport height
-  min-height: var(--viewport-height);
-  height: var(--viewport-height);
   position: relative;
   overflow: auto;
   background-color: var(--editor-header-bar-background-color);
+
+  @media screen and (min-width: 768px) {
+    min-height: 100vh;
+    height: 100vh;
+  }
 }
 
 $footer-height: 2rem;
@@ -139,8 +151,6 @@ $footer-height: 2rem;
 
   .section {
     padding-bottom: 0px;
-    height: 100%;
-    max-height: calc(100vh - #{$footer-height});
     position: relative;
     overflow: hidden;