mods to schema search layout

2 files changed, 93 insertions, 89 deletions

diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 869be2b03..d47d41a1e 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -631,7 +631,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
             style={{
                 overflow: this.props.overflow === true ? "auto" : undefined,
                 pointerEvents: !this.props.active() && !SnappingManager.GetIsDragging() ? "none" : undefined,
-                width: this.props.PanelWidth() || "100%", height: this.props.PanelPosition === "absolute" ? this.props.PanelHeight() : this.props.PanelHeight() || "100%", top: this.props.PanelPosition === "absolute" ? 52 : 0, position: this.props.PanelPosition || "relative",
+                width: this.props.PanelWidth() || "100%", height: this.props.PanelHeight() || "100%", position: "relative",
             }}  >
             <div className="collectionSchemaView-tableContainer"
                 style={{ backgroundColor: "white", width: `calc(100% - ${this.previewWidth()}px)` }}
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index bd938b75a..3b93b028e 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -1034,100 +1034,104 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                         <FontAwesomeIcon icon="object-group" size="lg" />
                     </span> */}
                     <div style={{ position: "absolute", left: 15 }}>{Doc.CurrentUserEmail}</div>
-                    <FontAwesomeIcon onPointerDown={SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} icon={"search"} size="lg" style={{ color: "black", position: "relative", left: 24, padding: 1 }} />
-                    <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={{ paddingLeft: 23, color: "black", width: this._searchbarOpen ? "200px" : "200px" }} />
-                </div>
-                <div style={{ zIndex: 20000, color: "black" }}>
-                    {this._searchbarOpen === true ?
-                        <div style={{ display: "flex", justifyContent: "center", }}>
-                            <div style={{
-                                width: cols > 0 ? length : 253,
-                                height: 25,
-                                borderColor: "#9c9396",
-                                border: "1px solid",
-                                borderRadius: "0.3em",
-                                borderBottom: this.open === false ? "1px solid" : "none",
-                                position: "absolute",
-                                background: "rgb(241, 239, 235)",
-                                top: 29
-                            }}>
-                                <form className="beta" style={{ justifyContent: "space-evenly", display: "flex" }}>
-                                    <div className="checkbox" style={{ margin: 0 }}>
-                                        <label style={{ fontSize: 12, marginTop: 6 }}>
-                                            <input style={{ marginLeft: -16, marginTop: -1, color: this.scale == false ? "black" : "grey" }} checked={this.filter === true} onChange={() => {
-                                                runInAction(() => {
-                                                    if (this.scale === false) {
-                                                        this.filter = !this.filter;
-                                                        if (this.filter === true && this.currentSelectedCollection !== undefined) {
-                                                            this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>(this.docsforfilter);
-                                                            this.currentSelectedCollection.props.Document._docFilters = new List<string>(Cast(this.props.Document._docFilters, listSpec("string"), []));
-                                                            this.props.Document.selectedDoc = this.currentSelectedCollection.props.Document;
-                                                        }
-                                                        else if (this.filter === false && this.currentSelectedCollection !== undefined) {
-                                                            this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>([]);
-                                                            this.currentSelectedCollection.props.Document._docFilters = undefined;
-                                                            this.props.Document.selectedDoc = undefined;
-                                                        }
+                    <div style={{ display: "flex", alignItems: "center" }}>
+                        <FontAwesomeIcon onPointerDown={SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} icon={"search"} size="lg"
+                            style={{ color: "black", left: 24, padding: 1, position: "relative" }} />
+
+                        <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, color: "black", height: 20, width: 200 }} />
+                        <div style={{
+                            height: 25,
+                            paddingLeft: "4px",
+                            paddingRight: "4px",
+                            border: "1px solid gray",
+                            borderRadius: "0.3em",
+                            borderBottom: this.open === false ? "1px solid" : "none",
+                        }}>
+                            <form className="beta" style={{ justifyContent: "space-evenly", display: "flex" }}>
+                                <div className="checkbox" style={{ margin: 0 }}>
+                                    <label style={{ fontSize: 12, marginTop: 6 }}>
+                                        <input style={{ marginLeft: -16, marginTop: -1, color: this.scale == false ? "black" : "grey" }} checked={this.filter === true} onChange={() => {
+                                            runInAction(() => {
+                                                if (this.scale === false) {
+                                                    this.filter = !this.filter;
+                                                    if (this.filter === true && this.currentSelectedCollection !== undefined) {
+                                                        this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>(this.docsforfilter);
+                                                        this.currentSelectedCollection.props.Document._docFilters = new List<string>(Cast(this.props.Document._docFilters, listSpec("string"), []));
+                                                        this.props.Document.selectedDoc = this.currentSelectedCollection.props.Document;
                                                     }
-                                                })
-                                            }} type="checkbox"></input>
+                                                    else if (this.filter === false && this.currentSelectedCollection !== undefined) {
+                                                        this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>([]);
+                                                        this.currentSelectedCollection.props.Document._docFilters = undefined;
+                                                        this.props.Document.selectedDoc = undefined;
+                                                    }
+                                                }
+                                            })
+                                        }} type="checkbox"></input>
                                             Filter
                                         </label>
-                                    </div>
-                                    <div style={{ display: "contents" }}>
-                                        <div className="radio" style={{ margin: 0 }}>
-                                            <label style={{ fontSize: 12, marginTop: 6 }} >
-                                                <input type="radio" style={{ marginLeft: -16, marginTop: -1 }} checked={this.scale === false} onChange={() => {
-                                                    runInAction(() => {
-                                                        this.scale = !this.scale;
-                                                        this.dataDoc[this.fieldKey] = new List<Doc>([]);
-                                                        if (this.currentSelectedCollection !== undefined) {
-                                                            this.currentSelectedCollection.props.Document._docFilters = undefined;
-                                                            this.currentSelectedCollection.props.Document._searchDocs = undefined;
-                                                            this.currentSelectedCollection = undefined;
-                                                        }
-                                                        this.submitSearch();
-                                                    })
-                                                }} />
-                                        Current collection
+                                </div>
+                                <div style={{ display: "contents" }}>
+                                    <div className="radio" style={{ margin: 0 }}>
+                                        <label style={{ fontSize: 12, marginTop: 6 }} >
+                                            <input type="radio" style={{ marginLeft: -16, marginTop: -1 }} checked={this.scale === false} onChange={() => {
+                                                runInAction(() => {
+                                                    this.scale = !this.scale;
+                                                    this.dataDoc[this.fieldKey] = new List<Doc>([]);
+                                                    if (this.currentSelectedCollection !== undefined) {
+                                                        this.currentSelectedCollection.props.Document._docFilters = undefined;
+                                                        this.currentSelectedCollection.props.Document._searchDocs = undefined;
+                                                        this.currentSelectedCollection = undefined;
+                                                    }
+                                                    this.submitSearch();
+                                                })
+                                            }} />
+                                        Collection
                                     </label>
-                                        </div>
-                                        <div className="radio" style={{ margin: 0 }}>
-                                            <label style={{ fontSize: 12, marginTop: 6 }} >
-                                                <input style={{ marginLeft: -16, marginTop: -1 }} type="radio" checked={this.scale === true} onChange={() => {
-                                                    runInAction(() => {
-                                                        this.scale = !this.scale;
-                                                        this.dataDoc[this.fieldKey] = new List<Doc>([]);
-                                                        this.filter = false;
-                                                        if (this.currentSelectedCollection !== undefined) {
-                                                            this.currentSelectedCollection.props.Document._docFilters = undefined;
-                                                            this.currentSelectedCollection.props.Document._searchDocs = undefined;
-                                                            this.currentSelectedCollection = undefined;
-                                                        }
-                                                        this.submitSearch();
-                                                    })
-                                                }} />
-                                            Database
+                                    </div>
+                                    <div className="radio" style={{ margin: 0 }}>
+                                        <label style={{ fontSize: 12, marginTop: 6 }} >
+                                            <input style={{ marginLeft: -16, marginTop: -1 }} type="radio" checked={this.scale === true} onChange={() => {
+                                                runInAction(() => {
+                                                    this.scale = !this.scale;
+                                                    this.dataDoc[this.fieldKey] = new List<Doc>([]);
+                                                    this.filter = false;
+                                                    if (this.currentSelectedCollection !== undefined) {
+                                                        this.currentSelectedCollection.props.Document._docFilters = undefined;
+                                                        this.currentSelectedCollection.props.Document._searchDocs = undefined;
+                                                        this.currentSelectedCollection = undefined;
+                                                    }
+                                                    this.submitSearch();
+                                                })
+                                            }} />
+                                            DB
                                     </label>
-                                        </div>
                                     </div>
-                                </form>
-                            </div>
-                            {this.noresults === "" ? <div style={{ display: this.open === true ? "contents" : "none" }}> <CollectionView {...this.props}
-                                Document={this.props.Document}
-                                moveDocument={returnFalse}
-                                removeDocument={returnFalse}
-                                PanelHeight={this.open === true ? () => height : () => 0}
-                                PanelWidth={this.open === true ? () => length : () => 0}
-                                PanelPosition={"absolute"}
-                                overflow={cols > 5 || rows > 8 ? true : false}
-                                focus={this.selectElement}
-                                ScreenToLocalTransform={Transform.Identity}
-                            /></div> : <div style={{ display: "flex", justifyContent: "center" }}><div style={{ height: 200, top: 54, width: 250, position: "absolute", backgroundColor: "rgb(241, 239, 235)", display: "flex", justifyContent: "center", alignItems: "center", border: "black 1px solid", }}>
-                                <div>{this.noresults}</div>
-                            </div></div>}
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+
+                </div>
+                <div style={{ zIndex: 20000, color: "black" }}>
+                    {this._searchbarOpen === true ?
+                        <div style={{ display: "flex", justifyContent: "center", }}>
+                            {this.noresults === "" ? <div style={{ display: this.open === true ? "flex" : "none", overflow: "auto", }}>
+                                <CollectionView {...this.props}
+                                    Document={this.props.Document}
+                                    moveDocument={returnFalse}
+                                    removeDocument={returnFalse}
+                                    PanelHeight={this.open === true ? () => height : () => 0}
+                                    PanelWidth={this.open === true ? () => length : () => 0}
+                                    overflow={cols > 5 || rows > 8 ? true : false}
+                                    focus={this.selectElement}
+                                    ScreenToLocalTransform={Transform.Identity}
+                                />
+                            </div> :
+                                <div style={{ display: "flex", justifyContent: "center" }}><div style={{ height: 200, top: 54, minWidth: 400, position: "absolute", backgroundColor: "rgb(241, 239, 235)", display: "flex", justifyContent: "center", alignItems: "center", border: "black 1px solid", }}>
+                                    <div>{this.noresults}</div>
+                                </div></div>}
                         </div> : undefined}
                 </div>