DocumentDecorations UI fix for layout checkbox and when theres no title

2 files changed, 16 insertions, 15 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index d1b6c5772..4f23681ac 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -221,29 +221,30 @@ $resizeHandler: 8px;
         pointer-events: auto;
         min-width: fit-content;
         text-align: center;
-        width: 125px;
         display: flex;
         height: 21px;
         opacity: 0.3;
         &:hover {
             opacity: 1;
         }
+        
 
         .checkbox{
-            position: fixed;
             display: inline;
-            margin-top: -2px;
-            margin-left: -5px;
-            font-size: 7px;
 
             .checkbox-box{
-                transform: scale(.7);
+                display: inline;
+                position: relative;
+                top: -2.5;
+                left: 35;
+                zoom: .7;
             }
 
-            .checkbox-text{
-                font-size: 7px;
-                margin-top: 10px;
-                margin-left: -20px;
+            & .checkbox-text{
+                display: inline;
+                position: relative;
+                top: 2;
+                font-size: 8px;
             }
         }
 
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 3b51f8c61..4da6bd697 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -829,8 +829,8 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
             <div className='documentDecorations-share' >
                 <div className={`documentDecorations-share${shareMode}`}>
                     &nbsp;
-                    <span>{shareSymbolIcon + ' ' + shareMode}</span>
-                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
+                    {shareSymbolIcon + ' ' + shareMode}
+                    &nbsp;
                     <div className='checkbox'>
                         <div className='checkbox-box'>
                             <input type="checkbox" checked={this.showLayoutAcl} onChange={action(() => (this.showLayoutAcl = !this.showLayoutAcl))} /> 
@@ -843,7 +843,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
         ) : (
             <div />
         );
-
+        
         const titleArea = this._editingTitle ? (
             <input
                 ref={this._keyinput}
@@ -859,7 +859,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
             />
         ) : (
             <div className="documentDecorations-title" key="title" onPointerDown={e => {e.stopPropagation}}>
-                <span className={`documentDecorations-titleSpan${colorScheme}`} onPointerDown={this.onTitleDown}>{`${hideTitle ? '' : this.selectionTitle}`}</span>
+                { hideTitle ? null : <span className={`documentDecorations-titleSpan${colorScheme}`} onPointerDown={this.onTitleDown}>{this.selectionTitle}</span>}
                 {sharingMenu}
                 {!useLock ? null : (
                     <Tooltip key="lock" title={<div className="dash-tooltip">toggle ability to interact with document</div>} placement="top">
@@ -903,7 +903,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                             <div className="documentDecorations-topbar" style={{ display: hideDeleteButton && hideTitle && hideOpenButton ? 'none' : undefined }} onPointerDown={this.onContainerDown}>
                                 {hideDeleteButton ? null : topBtn('close', 'times', undefined, e => this.onCloseClick(true), 'Close')}
                                 {hideResizers || hideDeleteButton ? null : topBtn('minimize', 'window-maximize', undefined, e => this.onCloseClick(undefined), 'Minimize')}
-                                {hideTitle ? null : titleArea}
+                                {titleArea}
                                 {hideOpenButton ? <div /> : topBtn('open', 'external-link-alt', this.onMaximizeDown, undefined, 'Open in Lightbox (ctrl: as alias, shift: in new collection)')}
                             </div>
                             {hideResizers ? null : (