major overhaul of mainView

10 files changed, 248 insertions, 513 deletions

diff --git a/src/Utils.ts b/src/Utils.ts
index 5b5a06839..6582e43ef 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -549,8 +549,8 @@ export function setupMoveUpEvents(
     target: object,
     e: React.PointerEvent,
     moveEvent: (e: PointerEvent, down: number[], delta: number[]) => boolean,
-    upEvent: (e: PointerEvent, movement: number[]) => void,
-    clickEvent: (e: PointerEvent, doubleTap?: boolean) => void,
+    upEvent: (e: PointerEvent, movement: number[]) => any,
+    clickEvent: (e: PointerEvent, doubleTap?: boolean) => any,
     stopPropagation: boolean = true,
     stopMovePropagation: boolean = true
 ) {
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index 40353b1b7..a79973aee 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -193,7 +193,6 @@ export class KeyManager {
                 break;
             case "t":
                 PromiseValue(Cast(Doc.UserDoc()["tabs-button-tools"], Doc)).then(pv => pv && (pv.onClick as ScriptField).script.run({ this: pv }));
-                MainView.Instance.flyoutWidth = MainView.Instance.flyoutWidth === 240 ? 0 : 240;
                 break;
             case "f":
                 SearchBox.Instance._searchFullDB = "My Stuff";
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 6cec5995c..43264d2e0 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -1,6 +1,7 @@
 @import "globalCssVariables";
 @import "nodeModuleOverrides";
 
+
 .dash-tooltip {
     font-size: 11px;
     padding: 2px;
@@ -14,11 +15,15 @@
     margin-top: 10px;
 }
 
+.mainContent-div-flyout,
 .mainContent-div {
     position: relative;
     width: 100%;
     height: 100%;
 }
+.mainContent-div-flyout {
+    left: calc(-1 * var(--flyoutHandleWidth));
+}
 
 // add nodes menu. Note that the + button is actually an input label, not an actual button.
 .mainView-docButtons {
@@ -116,7 +121,10 @@
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
     border-right: unset;
-    z-index: 2;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    padding: 4px;
 
     .mainView-propertiesDragger-icon {
         width: 10px;
@@ -158,16 +166,26 @@
             background: lightgrey;
         }
     }
+    .propertiesView {
+        right: 0;
+        position: absolute;
+        z-index: 2;
+    }
 }
 
 .mainView-menuPanel {
-
-    width: 60px;
+    min-width: var(--menuPanelWidth);
     background-color: #121721;
     height: calc(100% - $searchpanel-height);
     //overflow-y: scroll;
     //overflow-x: hidden;
 
+    .collectionStackingView {
+        scrollbar-width: none;
+    }
+    ::-webkit-scrollbar {
+        width:0;
+    }
 
     .mainView-menuPanel-button {
         padding: 7px;
@@ -274,7 +292,7 @@
 .mainView-libraryFlyout {
     height: 100%;
     width: 100%;
-    position: absolute;
+    position: relative;
     display: flex;
     flex-direction: column;
     z-index: 2;
@@ -296,39 +314,26 @@
     }
 }
 .mainView-libraryFlyout-out {
-    transition: width .5s;
+    transition: width .25s;
     box-shadow: rgb(156, 147, 150) 0.2vw 0.2vw 0.2vw;
 }
 
-.mainView-expandFlyoutButton {
-    position: absolute;
-    top: 120px;
-    right: 55px;
-    cursor: pointer;
-}
 
 .mainView-libraryHandle {
-    width: 28px;
-    left: calc(100% - 10px);
+    width: var(--flyoutHandleWidth);
     height: 55px;
     top: 50%;
+    left: -10px;
     border: 1px solid black;
     border-radius: 8px;
-    position: absolute;
-    z-index: 2;
+    position: relative;
+    z-index: 1;
     touch-action: none;
     background-color: lightgrey;
     cursor: grab;
-
-    .mainView-libraryDragger {
-        width: 100%;
-        position: absolute;
-    }
-    .mainView-libraryDragger-out {
-        width: 3vw;
-        position: fixed;
-        top: 0;
-    }
+    display: flex;
+    align-items: center;
+    padding: 12px;
 
     .mainView-libraryHandle-icon {
         width: 10px;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 52c598d7d..d30179f1c 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -39,7 +39,7 @@ import { DictationOverlay } from './DictationOverlay';
 import { DocumentDecorations } from './DocumentDecorations';
 import { FormatShapePane } from "./FormatShapePane";
 import { GestureOverlay } from './GestureOverlay';
-import { SEARCH_PANEL_HEIGHT } from './globalCssVariables.scss';
+import { SEARCH_PANEL_HEIGHT, MENU_PANEL_WIDTH } from './globalCssVariables.scss';
 import { KeyManager } from './GlobalKeyHandler';
 import { LinkMenu } from './linking/LinkMenu';
 import "./MainView.scss";
@@ -61,17 +61,15 @@ import { SearchBox } from './search/SearchBox';
 @observer
 export class MainView extends React.Component {
     public static Instance: MainView;
-    private _buttonBarHeight = 36;
     private _docBtnRef = React.createRef<HTMLDivElement>();
     private _mainViewRef = React.createRef<HTMLDivElement>();
     private _lastButton: Doc | undefined;
 
     @observable private _panelWidth: number = 0;
     @observable private _panelHeight: number = 0;
-    @observable private _flyoutTranslate: boolean = false;
-    @observable private _sidebarContent: any = this.userDoc?.sidebar;
     @observable private _panelContent: string = "none";
-    @observable public flyoutWidth: number = 0;
+    @observable private _sidebarContent: any = this.userDoc?.sidebar;
+    @observable private _flyoutWidth: number = 0;
 
     @computed private get topOffset() { return (CollectionMenu.Instance?.Pinned ? 35 : 0) + Number(SEARCH_PANEL_HEIGHT.replace("px", "")); }
     @computed private get userDoc() { return Doc.UserDoc(); }
@@ -79,6 +77,7 @@ export class MainView extends React.Component {
     @computed private get mainContainer() { return this.userDoc ? CurrentUserUtils.ActiveDashboard : CurrentUserUtils.GuestDashboard; }
     @computed public get mainFreeform(): Opt<Doc> { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); }
 
+    menuPanelWidth = () => Number(MENU_PANEL_WIDTH.replace("px", ""));
     propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, CurrentUserUtils.propertiesWidth || 0));
 
     componentDidMount() {
@@ -165,7 +164,7 @@ export class MainView extends React.Component {
             }
             if (SearchBox.Instance._searchbarOpen) {
                 const check = targets.some((thing) =>
-                    (thing.className === "collectionSchemaView-searchContainer" || (thing as any)?.dataset["icon"] === "filter" ||
+                    (thing.className === "collectionSchemaView-searchContainer" || (thing as any)?.dataset.icon === "filter" ||
                         thing.className === "collectionSchema-header-menuOptions"));
                 !check && SearchBox.Instance.resetSearch(true);
             }
@@ -221,16 +220,9 @@ export class MainView extends React.Component {
         e.preventDefault();
         e.stopPropagation();
     }
-
-    @action
-    onResize = (r: any) => {
-        this._panelWidth = r.offset.width;
-        this._panelHeight = r.offset.height;
-    }
-
     getPWidth = () => this._panelWidth - this.propertiesWidth();
     getPHeight = () => this._panelHeight;
-    getContentsHeight = () => this._panelHeight - this._buttonBarHeight;
+    getContentsHeight = () => this._panelHeight - Number(SEARCH_PANEL_HEIGHT.replace("px", ""));
 
     defaultBackgroundColors = (doc: Opt<Doc>, renderDepth: number) => {
         if (doc?.type === DocumentType.COL) {
@@ -292,39 +284,29 @@ export class MainView extends React.Component {
 
     @computed get dockingContent() {
         TraceMobx();
-        const width = this.flyoutWidth + this.propertiesWidth();
-        return <div className="mainContent-div" onDrop={this.onDrop} style={{ width: `calc(100% - ${width}px)`, height: "100%" }}>
+        return <div className={`mainContent-div${this._flyoutWidth ? "-flyout" : ""}`} onDrop={this.onDrop}
+            style={{ minWidth: `calc(100% - ${this._flyoutWidth + this.menuPanelWidth() + this.propertiesWidth()}px)`, width: `calc(100% - ${this._flyoutWidth + this.menuPanelWidth() + this.propertiesWidth()}px)` }}>
             {!this.mainContainer ? (null) : this.mainDocView}
         </div>;
     }
 
     @action
     onPropertiesPointerDown = (e: React.PointerEvent) => {
-        setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
-            CurrentUserUtils.propertiesWidth = this._panelWidth - e.clientX;
-            return false;
-        }), returnFalse, action(() => CurrentUserUtils.propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 250) : 0), false);
+        setupMoveUpEvents(this, e,
+            action(e => (CurrentUserUtils.propertiesWidth = Math.max(0, this._panelWidth - e.clientX)) ? false : false),
+            action(() => CurrentUserUtils.propertiesWidth < 5 && (CurrentUserUtils.propertiesWidth = 0)),
+            action(() => CurrentUserUtils.propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 250) : 0), false);
     }
 
     @action
     onFlyoutPointerDown = (e: React.PointerEvent) => {
-        if (this._flyoutTranslate) {
-            setupMoveUpEvents(this, e, action((e: PointerEvent) => {
-                this.flyoutWidth = Math.max(e.clientX - 58, 0);
-                if (this.flyoutWidth < 5) {
-                    this._panelContent = "none";
-                    this._lastButton && (this._lastButton.color = "white");
-                    this._lastButton && (this._lastButton._backgroundColor = "");
-                }
-                return false;
-            }), emptyFunction, action(() => {
-                if (this.flyoutWidth < 15) this.expandFlyout();
-                else this.closeFlyout();
-            }));
-        }
+        setupMoveUpEvents(this, e,
+            action(e => (this._flyoutWidth = Math.max(e.clientX - 58, 0)) ? false : false),
+            () => this._flyoutWidth < 5 && this.closeFlyout(),
+            this.toggleFlyout);
     }
 
-    flyoutWidthFunc = () => this.flyoutWidth;
+    flyoutWidthFunc = () => this._flyoutWidth;
     addDocTabFunc = (doc: Doc, where: string, libraryPath?: Doc[]): boolean => {
         return where === "close" ? CollectionDockingView.CloseSplit(doc) :
             doc.dockingConfig ? CurrentUserUtils.openDashboard(Doc.UserDoc(), doc) : CollectionDockingView.AddSplit(doc, "right");
@@ -333,41 +315,41 @@ export class MainView extends React.Component {
     mainContainerXf = () => this.sidebarScreenToLocal().translate(-58, 0);
 
     @computed get flyout() {
-        if (!this._sidebarContent) return null;
-        return <div className="mainView-libraryFlyout">
-            <div className="mainView-contentArea">
-                <DocumentView
-                    Document={this._sidebarContent}
-                    DataDoc={undefined}
-                    LibraryPath={emptyPath}
-                    addDocument={undefined}
-                    addDocTab={this.addDocTabFunc}
-                    pinToPres={emptyFunction}
-                    NativeHeight={returnZero}
-                    NativeWidth={returnZero}
-                    rootSelected={returnTrue}
-                    removeDocument={returnFalse}
-                    onClick={undefined}
-                    ScreenToLocalTransform={this.mainContainerXf}
-                    ContentScaling={returnOne}
-                    PanelWidth={this.flyoutWidthFunc}
-                    PanelHeight={this.getContentsHeight}
-                    renderDepth={0}
-                    focus={emptyFunction}
-                    backgroundColor={this.defaultBackgroundColors}
-                    parentActive={returnTrue}
-                    whenActiveChanged={emptyFunction}
-                    bringToFront={emptyFunction}
-                    docFilters={returnEmptyFilter}
-                    searchFilterDocs={returnEmptyDoclist}
-                    ContainingCollectionView={undefined}
-                    ContainingCollectionDoc={undefined}
-                    relative={true}
-                    forcedBackgroundColor={() => "lightgrey"}
-                />
-            </div>
-            {this.docButtons}
-        </div>;
+        return !this._sidebarContent || !this._flyoutWidth ? (null) :
+            <div className={`mainView-libraryFlyout${this._flyoutWidth ? "" : "-out"}`} style={{ minWidth: this._flyoutWidth, width: this._flyoutWidth }} >
+                <div className="mainView-contentArea">
+                    <DocumentView
+                        Document={this._sidebarContent}
+                        DataDoc={undefined}
+                        LibraryPath={emptyPath}
+                        addDocument={undefined}
+                        addDocTab={this.addDocTabFunc}
+                        pinToPres={emptyFunction}
+                        NativeHeight={returnZero}
+                        NativeWidth={returnZero}
+                        rootSelected={returnTrue}
+                        removeDocument={returnFalse}
+                        onClick={undefined}
+                        ScreenToLocalTransform={this.mainContainerXf}
+                        ContentScaling={returnOne}
+                        PanelWidth={this.flyoutWidthFunc}
+                        PanelHeight={this.getContentsHeight}
+                        renderDepth={0}
+                        focus={emptyFunction}
+                        backgroundColor={this.defaultBackgroundColors}
+                        parentActive={returnTrue}
+                        whenActiveChanged={emptyFunction}
+                        bringToFront={emptyFunction}
+                        docFilters={returnEmptyFilter}
+                        searchFilterDocs={returnEmptyDoclist}
+                        ContainingCollectionView={undefined}
+                        ContainingCollectionDoc={undefined}
+                        relative={true}
+                        forcedBackgroundColor={() => "lightgrey"}
+                    />
+                </div>
+                {this.docButtons}
+            </div>;
     }
 
     @computed get menuPanel() {
@@ -386,7 +368,7 @@ export class MainView extends React.Component {
                 onClick={undefined}
                 ScreenToLocalTransform={this.sidebarScreenToLocal}
                 ContentScaling={returnOne}
-                PanelWidth={() => 60}
+                PanelWidth={this.menuPanelWidth}
                 PanelHeight={this.getContentsHeight}
                 renderDepth={0}
                 focus={emptyFunction}
@@ -404,34 +386,22 @@ export class MainView extends React.Component {
         </div>;
     }
 
-
-    @action
-    closeFlyout = () => {
-        this._lastButton && (this._lastButton.color = "white");
-        this._lastButton && (this._lastButton._backgroundColor = "");
-        this._panelContent = "none";
-        this.flyoutWidth = 0;
-    }
-
     @action
     selectMenu = (button: Doc) => {
         const title = StrCast(Doc.GetProto(button).title);
-        this._lastButton && (this._lastButton.color = "white");
-        this._lastButton && (this._lastButton._backgroundColor = "");
-        if (this._panelContent === title && this.flyoutWidth !== 0) {
-            this._panelContent = "none";
-            this.flyoutWidth = 0;
+        if (this._panelContent === title && this._flyoutWidth) {
+            this.closeFlyout();
         } else {
             switch (this._panelContent = title) {
                 case "Settings":
                     SettingsManager.Instance.open();
-                    this.flyoutWidth = 0;
+                    this.closeFlyout();
                     break;
                 case "Catalog":
                     SearchBox.Instance._searchFullDB = "My Stuff";
                     SearchBox.Instance.newsearchstring = "";
                     SearchBox.Instance.enter(undefined);
-                    this.flyoutWidth = 0;
+                    this.closeFlyout();
                     break;
                 default:
                     this._sidebarContent.proto = button.target as any;
@@ -446,38 +416,26 @@ export class MainView extends React.Component {
 
     @computed get propertiesView() {
         TraceMobx();
-        return <div className="mainView-propertiesView">
-            <PropertiesView
-                width={this.propertiesWidth()}
-                height={this.getContentsHeight()}
-                renderDepth={1}
-                ScreenToLocalTransform={Transform.Identity}
-                onDown={action(() => CurrentUserUtils.propertiesWidth = 0)} />
-        </div>;
+        return <PropertiesView
+            width={this.propertiesWidth()}
+            height={this.getContentsHeight()}
+            renderDepth={1}
+            ScreenToLocalTransform={Transform.Identity} />;
     }
 
     @computed get mainInnerContent() {
         return <>
             {this.menuPanel}
             <div className="mainView-innerContent" >
-                <div className="mainView-flyoutContainer" style={{ width: this.flyoutWidth }}>
-                    {this.flyoutWidth === 0 ? (null) :
-                        <div className="mainView-libraryHandle" onPointerDown={this.onFlyoutPointerDown} >
-                            <span className={`mainView-libraryDragger${this._flyoutTranslate ? "" : "-out"}`} />
-                            <div className="mainview-libraryHandle-icon">
-                                <FontAwesomeIcon icon="chevron-left" color="black" size="sm" />
-                            </div>
-                        </div>}
-                    <div className={`mainView-libraryFlyout${this._flyoutTranslate ? "" : "-out"}`} >
-                        {this.flyout}
-                        {this.expandButton}
-                    </div>
+                {this.flyout}
+                <div className="mainView-libraryHandle" style={{ display: !this._flyoutWidth ? "none" : undefined }} onPointerDown={this.onFlyoutPointerDown} >
+                    <FontAwesomeIcon icon="chevron-left" color="black" size="sm" />
                 </div>
+
                 {this.dockingContent}
+
                 <div className="mainView-propertiesDragger" onPointerDown={this.onPropertiesPointerDown} style={{ right: this.propertiesWidth() - 1 }}>
-                    <div className="mainView-propertiesDragger-icon">
-                        <FontAwesomeIcon icon={this.propertiesWidth() < 10 ? "chevron-left" : "chevron-right"} color="black" size="sm" />
-                    </div>
+                    <FontAwesomeIcon icon={this.propertiesWidth() < 10 ? "chevron-left" : "chevron-right"} color="black" size="sm" />
                 </div>
                 {this.propertiesWidth() < 10 ? (null) : this.propertiesView}
             </div>
@@ -489,12 +447,15 @@ export class MainView extends React.Component {
         const pinned = FormatShapePane.Instance?.Pinned;
         const innerContent = this.mainInnerContent;
         return !this.userDoc ? (null) : (
-            <Measure offset onResize={this.onResize}>
+            <Measure offset onResize={action((r: any) => {
+                this._panelWidth = r.offset.width;
+                this._panelHeight = r.offset.height;
+            })}>
                 {({ measureRef }) =>
                     <div className="mainView-mainContent" ref={measureRef} style={{
                         color: this.darkScheme ? "rgb(205,205,205)" : "black",
                         height,
-                        width: pinned ? `calc(100% - 200px)` : "100%"
+                        width: pinned ? `calc(100% - 200px)` : "100%",
                     }} >
                         {innerContent}
                     </div>
@@ -502,15 +463,15 @@ export class MainView extends React.Component {
             </Measure>);
     }
 
-    expandFlyout = action(() => {
-        this._flyoutTranslate = true;
-        this.flyoutWidth = (this.flyoutWidth || 250);
+    expandFlyout = action(() => this._flyoutWidth = (this._flyoutWidth || 250));
+    toggleFlyout = action(() => this._flyoutWidth < 15 ? this.expandFlyout() : this.closeFlyout());
+    closeFlyout = action(() => {
+        this._lastButton && (this._lastButton.color = "white");
+        this._lastButton && (this._lastButton._backgroundColor = "");
+        this._panelContent = "none";
+        this._flyoutWidth = 0;
     });
 
-    @computed get expandButton() {
-        return !this._flyoutTranslate ? (<div className="mainView-expandFlyoutButton" title="Re-attach sidebar" onPointerDown={this.expandFlyout}></div>) : (null);
-    }
-
     addButtonDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg: boolean, doc) => {
         const ret = flg && Doc.AddDocToList(Doc.UserDoc().dockedBtns as Doc, "data", doc);
         ret && (doc._stayInCollection = undefined);
@@ -728,7 +689,7 @@ export class MainView extends React.Component {
                     </div>;
                 </span>, ele);
 
-                var success = false;
+                let success = false;
                 const onSuccess = () => {
                     success = true;
                     clearTimeout(interval);
diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index 254afeb0a..80f116029 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -6,7 +6,7 @@
     cursor: auto;
 
     overflow-x: hidden;
-    overflow-y: scroll;
+    overflow-y: auto;
 
     .propertiesView-title {
         background-color: rgb(159, 159, 159);
@@ -271,7 +271,7 @@
         // display: inline-table;
         background-color: #ececec;
         max-height: 130px;
-        overflow-y: scroll;
+        overflow-y: auto;
         width: 92%;
 
         .propertiesView-sharingTable-item {
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 792db3e85..2df367502 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -37,7 +37,6 @@ interface PropertiesViewProps {
     height: number;
     renderDepth: number;
     ScreenToLocalTransform: () => Transform;
-    onDown: (event: any) => void;
 }
 
 @observer
@@ -867,13 +866,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             if (this.selectedDoc && !this.isPres) {
                 return <div className="propertiesView" style={{
                     width: this.props.width,
+                    minWidth: this.props.width
                     //overflowY: this.scrolling ? "scroll" : "visible"
                 }} >
                     <div className="propertiesView-title" style={{ width: this.props.width }}>
                         Properties
-                    {/* <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
-                        <FontAwesomeIcon icon="times" color="black" size="sm" />
-                    </div> */}
                     </div>
                     <div className="propertiesView-name">
                         {this.editableTitle}
diff --git a/src/client/views/globalCssVariables.scss b/src/client/views/globalCssVariables.scss
index 70a7946ba..d0c90edcb 100644
--- a/src/client/views/globalCssVariables.scss
+++ b/src/client/views/globalCssVariables.scss
@@ -37,6 +37,11 @@ $COLLECTION_BORDER_WIDTH: 1;
 $MINIMIZED_ICON_SIZE:25;
 $MAX_ROW_HEIGHT: 44px;
 $DFLT_IMAGE_NATIVE_DIM: 900px;
+$MENU_PANEL_WIDTH: 60px;
+:root {
+    --flyoutHandleWidth: 28px;
+    --menuPanelWidth: 60px;
+}
 
 :export {
     contextMenuZindex: $contextMenu-zindex;
@@ -47,4 +52,5 @@ $DFLT_IMAGE_NATIVE_DIM: 900px;
     ANTIMODEMENU_HEIGHT: $antimodemenu-height;
     SEARCH_PANEL_HEIGHT: $searchpanel-height;
     DFLT_IMAGE_NATIVE_DIM: $DFLT_IMAGE_NATIVE_DIM;
+    MENU_PANEL_WIDTH: $MENU_PANEL_WIDTH;
 }
\ No newline at end of file
diff --git a/src/client/views/globalCssVariables.scss.d.ts b/src/client/views/globalCssVariables.scss.d.ts
index 531b38d68..fb3a327d0 100644
--- a/src/client/views/globalCssVariables.scss.d.ts
+++ b/src/client/views/globalCssVariables.scss.d.ts
@@ -8,6 +8,7 @@ interface IGlobalScss {
     ANTIMODEMENU_HEIGHT: string;
     SEARCH_PANEL_HEIGHT: string;
     DFLT_IMAGE_NATIVE_DIM: string;
+    MENU_PANEL_WIDTH: string;
 }
 declare const globalCssVariables: IGlobalScss;
 
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index aa5180c96..13d4a6d5a 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -15,120 +15,123 @@
     overflow: visible;
     z-index: 10000;
 
-    .searchBox-lozenge-user,
-    .searchBox-lozenge-dashboard,
-    .searchBox-lozenge {
-        background-color: #313131;
-        border-radius: 5px;
-        height: 18px;
-        padding: 4px;
-        box-shadow: lightgrey 0.15em 0.15em 0.1em;
-        margin: 2px;
-        margin-bottom: 4px;
-        border-top: dimgrey 1px solid;
-        border-left: dimgrey 1px solid;
+    .searchBox-bar {
+        height: $searchpanel-height;
         display: flex;
-        .searchBox-logoff,
-        .searchBox-dashboards {
-            border-radius: 3px;
-            background: olivedrab;
-            color: white;
-            position: relative;
-            display: none;
-            margin-left: 3px;
-            padding-left: 2px;
-            padding-right: 2px;
-            padding-bottom: 11px;
-            cursor: default;
-        }
-        .searchBox-logoff {
-            background: red;
-        }
+        justify-content: center;
+        align-items: center;
+        background-color: black;
 
-        .searchBox-dashSelect{
-            background-color: black;
-            color: white;
-            font-size: 9;
-            margin-right: 6;
-            border-radius: 5px;
-            position: relative;
-            height: 15px;
-            transform: translate(0,-3px);
+        .searchBox-lozenges {
+            position: absolute;
+            left: 15;
+            display: flex;
 
-            &:hover {
-                cursor: pointer;
+            .searchBox-lozenge-user,
+            .searchBox-lozenge-dashboard,
+            .searchBox-lozenge {
+                background-color: #313131;
+                border-radius: 5px;
+                height: 18px;
+                padding: 4px;
+                box-shadow: lightgrey 0.15em 0.15em 0.1em;
+                margin: 2px;
+                margin-bottom: 4px;
+                border-top: dimgrey 1px solid;
+                border-left: dimgrey 1px solid;
+                display: flex;
+                .searchBox-logoff,
+                .searchBox-dashboards {
+                    border-radius: 3px;
+                    background: olivedrab;
+                    color: white;
+                    position: relative;
+                    display: none;
+                    margin-left: 3px;
+                    padding-left: 2px;
+                    padding-right: 2px;
+                    padding-bottom: 11px;
+                    cursor: default;
+                }
+                .searchBox-logoff {
+                    background: red;
+                }
+
+                .searchBox-dashSelect{
+                    background-color: black;
+                    color: white;
+                    font-size: 9;
+                    margin-right: 6;
+                    border-radius: 5px;
+                    position: relative;
+                    height: 15px;
+                    transform: translate(0,-3px);
+
+                    &:hover {
+                        cursor: pointer;
+                    }
+                }
+            }
+            .searchBox-lozenge-user:hover {
+                .searchBox-logoff {
+                    display:inline-block;
+                }
+            }
+            .searchBox-lozenge-dashboard:hover {
+                .searchBox-dashboards {
+                    display:inline-block;
+                }
             }
         }
-    }
-    .searchBox-lozenge-user:hover {
-        .searchBox-logoff {
-            display:inline-block;
-        }
-    }
-    .searchBox-lozenge-dashboard:hover {
-        .searchBox-dashboards {
-            display:inline-block;
-        }
-    }
-}
-
-.searchBox-bar {
-    height: 32px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: black;
-    .searchBox-barChild {
-
-        &.searchBox-collection {
-            flex: 0 1 auto;
-            margin-left: 2px;
-            margin-right: 2px
-        }
-
-        &.searchBox-input {
-            margin:5px;
-            border-radius:20px;
-            border:black;    
-            display: block;
-            width: 130px;
-            -webkit-transition: width 0.4s;
-            transition: width 0.4s;
-            align-self: stretch;
-            outline:none;
+        .searchBox-query {
+            position: relative;
+            display: flex;
+            width: 450;
         }
+        .searchBox-barChild {
 
-        .searchBox-input:focus {
-            width: 500px;
-            outline:none;
-        }
+            &.searchBox-collection {
+                flex: 0 1 auto;
+                margin-left: 2px;
+                margin-right: 2px
+            }
 
-        &.searchBox-filter {
-            align-self: stretch;
-            button{
-                transform:none;
+            &.searchBox-input {
+                margin:5px;
+                border-radius:20px;
+                border:black;    
+                display: block;
+                width: 130px;
+                -webkit-transition: width 0.4s;
+                transition: width 0.4s;
+                align-self: stretch;
+                outline:none;
+                &:focus {
+                    width: 500px;
+                    outline:none;
+                }
             }
-            button:hover{
-                transform:none;
+            &.searchBox-filter {
+                align-self: stretch;
+                button{
+                    transform:none;
+                    &:hover {
+                        transform: none;
+                    }
+                }
             }
-        }
 
-        &.searchBox-submit {
-            margin-left: 2px;
-            margin-right: 2px
-        }
+            &.searchBox-submit {
+                margin-left: 2px;
+                margin-right: 2px
+            }
 
-        &.searchBox-close {
-            color: $light-color;
-            max-height: 32px;
+            &.searchBox-close {
+                color: $light-color;
+                max-height: $searchpanel-height;
+            }
         }
-    }
-}
-
-.searchBox-quickFilter {
-    width: 100%;
-    height: 40px;
-    margin-top: 10px;
+    }   
 }
 
 .searchBox-results {
@@ -149,241 +152,4 @@
         text-align: left;
         font-weight: bold;
     }
-}
-
-.filter-form {
-    position: relative;
-    background: #121721;
-    flex-direction: column;
-    transform-origin: top;
-    transition: height 0.3s ease, display 0.6s ease, overflow 0.6s ease;
-    height:0px;
-    overflow:hidden;
-
-
-    .filter-header {
-        //display: flex;
-        position: relative;
-        //flex-wrap:wrap;
-        right: 1px;
-        color: grey;
-        //flex-direction: row-reverse;
-        transform-origin: top;
-        //justify-content: space-evenly;
-        margin-bottom: 5px;
-        overflow:hidden;
-        transition:height 0.3s ease-out;
-
-
-
-        .filter-item {
-            position: relative;
-            border:1px solid grey;
-            border-radius: 16px;
-
-        }
-    }
-
-    .filter-body {
-        position: relative;
-        right: 1px;
-        color: grey;
-        transform-origin: top;
-        border-top: 0px;
-
-        overflow:hidden;
-        transition:height 0.3s ease-out;
-        height:0px;
-
-    }
-    .filter-key {
-        position: relative;
-        right: 1px;
-        color: grey;
-        transform-origin: top;
-        border-top: 0px;
-        overflow:hidden;
-        transition:height 0.3s ease-out;
-        height:0px;
-        
-        // .filter-keybar {
-        //     display: flex;
-        //     flex-wrap: wrap;
-        //     justify-content: space-evenly;
-        //     height: auto;
-        //     width: 100%;
-        //     flex-direction: row-reverse;
-        //     margin-top:5px;
-            
-        //     .filter-item {
-        //         position: relative;
-        //         border:1px solid grey;
-        //         border-radius: 16px;
-        //     }
-        // }
-    }
-}
-
-// .top-filter-header {
-
-//     #header {
-//         text-transform: uppercase;
-//         letter-spacing: 2px;
-//         font-size: 13;
-//         width: 80%;
-//     }
-
-//     .close-icon {
-//         width: 20%;
-//         opacity: .6;
-//         position: relative;
-//         display: block;
-
-//         .line {
-//             display: block;
-//             background: $alt-accent;
-//             width: 20;
-//             height: 3;
-//             position: absolute;
-//             right: 0;
-//             border-radius: ($height-line / 2);
-
-//             &.line-1 {
-//                 transform: rotate(45deg);
-//                 top: 45%;
-//             }
-
-//             &.line-2 {
-//                 transform: rotate(-45deg);
-//                 top: 45%;
-//             }
-//         }
-//     }
-
-//     .close-icon:hover {
-//         opacity: 1;
-//     }
-
-// }
-
-// .filter-options {
-
-//     .filter-div {
-//         margin-top: 10px;
-//         margin-bottom: 10px;
-//         display: inline-block;
-//         width: 100%;
-//         border-color: rgba(178, 206, 248, .2); // $darker-alt-accent
-//         border-top-style: solid;
-
-//         .filter-header {
-//             display: flex;
-//             align-items: center;
-//             margin-bottom: 10px;
-//             letter-spacing: 2px;
-
-//             .filter-title {
-//                 font-size: 13;
-//                 text-transform: uppercase;
-//                 margin-top: 10px;
-//                 margin-bottom: 10px;
-//                 -webkit-transition: all 0.2s ease-in-out;
-//                 -moz-transition: all 0.2s ease-in-out;
-//                 -o-transition: all 0.2s ease-in-out;
-//                 transition: all 0.2s ease-in-out;
-//             }
-//         }
-
-//         .filter-header:hover .filter-title {
-//             transform: scale(1.05);
-//         }
-
-//         .filter-panel {
-//             max-height: 0px;
-//             width: 100%;
-//             overflow: hidden;
-//             opacity: 0;
-//             transform-origin: top;
-//             -webkit-transition: all 0.2s ease-in-out;
-//             -moz-transition: all 0.2s ease-in-out;
-//             -o-transition: all 0.2s ease-in-out;
-//             transition: all 0.2s ease-in-out;
-//             text-align: center;
-//         }
-//     }
-// }
-
-// .filter-buttons {
-//     border-color: rgba(178, 206, 248, .2); // $darker-alt-accent
-//     border-top-style: solid;
-//     padding-top: 10px;
-// }
-
-
-.active-filters {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-    width: 100%;
-    margin-right: 30px;
-    position: relative;
-
-    .active-icon {
-        max-width: 40px;
-        flex: initial;
-
-        &.icon {
-            width: 40px;
-            text-align: center;
-            margin-bottom: 5px;
-            position: absolute;
-        }
-
-        &.container {
-            display: flex;
-            flex-direction: column;
-            width: 40px;
-        }
-
-        &.description {
-            text-align: center;
-            top: 40px;
-            position: absolute;
-            width: 40px;
-            font-size: 9px;
-            opacity: 0;
-            -webkit-transition: all 0.2s ease-in-out;
-            -moz-transition: all 0.2s ease-in-out;
-            -o-transition: all 0.2s ease-in-out;
-            transition: all 0.2s ease-in-out;
-        }
-
-        &.icon:hover+.description {
-            opacity: 1;
-        }
-    }
-
-    .col-icon {
-        height: 35px;
-        margin-left: 5px;
-        width: 35px;
-        background-color: black;
-        color: white;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        .save-filter,
-        .reset-filter,
-        .all-filter {
-            background-color: gray;
-        }
-
-        .save-filter:hover,
-        .reset-filter:hover,
-        .all-filter:hover {
-            background-color: $darker-alt-accent;
-        }
-    }
 }
\ No newline at end of file
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 3926208ae..ee38046be 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -495,31 +495,31 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         const myDashboards = DocListCast(CurrentUserUtils.MyDashboards.data);
         return (
             <div style={{ pointerEvents: "all" }} className="searchBox-container">
-                <div style={{ position: "absolute", left: 15, height: 32, alignItems: "center", display: "flex" }}>
-                    <div className="searchBox-lozenge-user">
-                        {`${Doc.CurrentUserEmail}`}
-                        <div className="searchBox-logoff" onClick={() => window.location.assign(Utils.prepend("/logout"))}>
-                            Logoff
+                <div className="searchBox-bar">
+                    <div className="searchBox-lozenges" >
+                        <div className="searchBox-lozenge-user">
+                            {`${Doc.CurrentUserEmail}`}
+                            <div className="searchBox-logoff" onClick={() => window.location.assign(Utils.prepend("/logout"))}>
+                                Logoff
                         </div>
-                    </div>
-                    <div className="searchBox-lozenge">
-                        {`UI project`}
-                    </div>
-                    <div className="searchBox-lozenge-dashboard"  >
-                        <select className="searchBox-dashSelect" onChange={e => CurrentUserUtils.openDashboard(Doc.UserDoc(), myDashboards[Number(e.target.value)])}
-                            value={myDashboards.indexOf(CurrentUserUtils.ActiveDashboard)}>
-                            {myDashboards.map((dash, i) => <option key={dash[Id]} value={i}> {StrCast(dash.title)} </option>)}
-                        </select>
-                        <div className="searchBox-dashboards" onClick={undoBatch(() => CurrentUserUtils.createNewDashboard(Doc.UserDoc()))}>
-                            New
                         </div>
-                        <div className="searchBox-dashboards" onClick={undoBatch(() => CurrentUserUtils.snapshotDashboard(Doc.UserDoc()))}>
-                            Snapshot
+                        <div className="searchBox-lozenge">
+                            {`UI project`}
+                        </div>
+                        <div className="searchBox-lozenge-dashboard"  >
+                            <select className="searchBox-dashSelect" onChange={e => CurrentUserUtils.openDashboard(Doc.UserDoc(), myDashboards[Number(e.target.value)])}
+                                value={myDashboards.indexOf(CurrentUserUtils.ActiveDashboard)}>
+                                {myDashboards.map((dash, i) => <option key={dash[Id]} value={i}> {StrCast(dash.title)} </option>)}
+                            </select>
+                            <div className="searchBox-dashboards" onClick={undoBatch(() => CurrentUserUtils.createNewDashboard(Doc.UserDoc()))}>
+                                New
+                        </div>
+                            <div className="searchBox-dashboards" onClick={undoBatch(() => CurrentUserUtils.snapshotDashboard(Doc.UserDoc()))}>
+                                Snapshot
+                        </div>
                         </div>
                     </div>
-                </div>
-                <div className="searchBox-bar">
-                    <div style={{ position: "relative", display: "flex", width: 450 }}>
+                    <div className="searchBox-query" >
                         <input value={this.newsearchstring} autoComplete="off" onChange={this.onChange} type="text" placeholder="Search..." id="search-input" ref={this._inputRef}
                             className="searchBox-barChild searchBox-input" onPointerDown={this.openSearch} onKeyPress={this.enter} onFocus={this.openSearch}
                             style={{ padding: 1, paddingLeft: 20, paddingRight: 60, color: "black", height: 20, width: 250 }} />