fix description scroll in the dashboard, too small scroll area for sm…

…all screens
WorldBrain · Mar 28, 2024 · 6cdd465 · 6cdd465
1 parent 45d7f79
commit 6cdd465
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 10 deletions.
diff --git a/external/@worldbrain/memex-common b/external/@worldbrain/memex-common
diff --git a/src/annotations/components/AnnotationCreate.tsx b/src/annotations/components/AnnotationCreate.tsx
@@ -419,7 +419,7 @@ export class AnnotationCreate extends React.Component<Props, State>
                             autoFocus={
                                 this.props.autoFocus || this.state.onEditClick
                             }
-                            // placeholder={`Write a note...`}
+                            promptPlaceholder={`Write a note...`}
                             isRibbonCommentBox={this.props.isRibbonCommentBox}
                             getYoutubePlayer={this.props.getYoutubePlayer}
                             sidebarEvents={this.props.sidebarEvents}

diff --git a/src/annotations/components/AnnotationEdit.tsx b/src/annotations/components/AnnotationEdit.tsx
@@ -193,7 +193,7 @@ class AnnotationEdit extends React.Component<Props> {
                         }
                         markdownContent={this.props.comment}
                         onKeyDown={this.handleInputKeyDown}
-                        placeholder={`Add Note. Click on ( ? ) for formatting help.`}
+                        promptPlaceholder={`Add Note. Click on ( ? ) for formatting help.`}
                         setEditorInstanceRef={(ref) => (this.editorRef = ref)}
                         autoFocus={this.props.isEditMode}
                         imageSupport={this.props.imageSupport}

diff --git a/src/custom-lists/ui/space-email-invites/index.tsx b/src/custom-lists/ui/space-email-invites/index.tsx
@@ -248,6 +248,12 @@ const EmailListContainer = styled.div`
     align-items: flex-start;
     max-height: 150px;
     overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    scrollbar-width: none;
 `
 
 const InviteItemContainer = styled.div`

diff --git a/src/dashboard-refactor/search-results/components/list-details.tsx b/src/dashboard-refactor/search-results/components/list-details.tsx
@@ -41,6 +41,7 @@ interface State {
     showQuickTutorial: boolean
     spaceTitle: string
     isDeboucingEditor: boolean
+    shouldShowEditor: boolean
 }
 
 export default class ListDetails extends PureComponent<Props, State> {
@@ -54,8 +55,44 @@ export default class ListDetails extends PureComponent<Props, State> {
         showQuickTutorial: false,
         spaceTitle: this.props.listData.name,
         isDeboucingEditor: false,
+        shouldShowEditor: true,
     }
 
+    async componentDidMount() {
+        if (
+            !this.editorRef?.checkIfHasContent() &&
+            !this.state.isEditingDescription
+        ) {
+            this.setState({ shouldShowEditor: false })
+        } else if (this.state.isEditingDescription) {
+            this.setState({ shouldShowEditor: true })
+        }
+        if (
+            this.editorRef?.checkIfHasContent() ||
+            this.props.description.length > 0
+        ) {
+            this.setState({ shouldShowEditor: true })
+        }
+    }
+
+    // componentDidUpdate(prevProps: Props, prevState: State) {
+    //     if (
+    //         prevState.isEditingDescription !== this.state.isEditingDescription
+    //     ) {
+    //         this.editorRef?.setEditable(this.state?.isEditingDescription)
+
+    //         if (
+    //             !this.editorRef?.checkIfHasContent() &&
+    //             !this.state?.isEditingDescription
+    //         ) {
+    //             this.setState({ shouldShowEditor: false })
+    //         } else if (this.state?.isEditingDescription) {
+    //             this.setState({ shouldShowEditor: true })
+    //             this.editorRef.focus()
+    //         }
+    //     }
+    // }
+
     async componentWillUpdate(nextProps: Props, prevState: State) {
         if (this.props.listData.unifiedId !== nextProps.listData.unifiedId) {
             this.setState({
@@ -152,15 +189,14 @@ export default class ListDetails extends PureComponent<Props, State> {
         // ) {
         //     return <></>
         // }
-
         return (
             <MemexEditor
                 onContentUpdate={(description) =>
                     this.setState({ description })
                 }
                 markdownContent={this.state.description}
                 onKeyDown={this.handleDescriptionInputKeyDown}
-                placeholder="Write a description for this Space"
+                promptPlaceholder="+ Add Space description"
                 setEditorInstanceRef={(ref) => (this.editorRef = ref)}
                 editable={this.state.isEditingDescription}
                 imageSupport={this.props.imageSupport}
@@ -442,7 +478,7 @@ export default class ListDetails extends PureComponent<Props, State> {
                                 </BtnsContainer>
                             </TitleContainer>
                         )}
-                        {this.props.isOwnedList &&
+                        {/* {this.props.isOwnedList &&
                             !this.props.description?.length &&
                             !this.state.isEditingDescription &&
                             !(
@@ -460,7 +496,7 @@ export default class ListDetails extends PureComponent<Props, State> {
                                         + Add Space description
                                     </EditDescriptionButton>
                                 </>
-                            )}
+                            )} */}
                     </Container>
                     <DescriptionContainer>
                         {this.renderDescription()}

diff --git a/src/dashboard-refactor/search-results/index.tsx b/src/dashboard-refactor/search-results/index.tsx
@@ -1283,8 +1283,8 @@ export default class SearchResultsContainer extends React.Component<
 }
 
 const ResultsScrollContainer = styled.div`
-    overflow-y: scroll;
-    overflow-x: hidden;
+    /* overflow-y: scroll;
+    overflow-x: hidden; */
     height: fill-available;
     width: fill-available;
     position: relative;
@@ -1547,6 +1547,8 @@ const PageTopBarBox = styled.div<{
     margin-top: -1px;
     width: fill-available;
     width: -moz-available;
+    background: ${(props) => props.theme.colors.black}98;
+    backdrop-filter: blur(10px);
 
     ${(props) =>
         props.inPageMode &&
@@ -1629,7 +1631,7 @@ const ResultsBox = styled.div`
     width: fill-available;
     height: fill-available;
     grid-gap: 1px;
-    overflow: hidden;
+    /* overflow: hidden; */
     align-items: center;
 `
 
@@ -1644,6 +1646,7 @@ const ResultsContainer = styled.div`
     flex: 1;
     height: fill-available;
     height: -moz-available;
+    overflow: scroll;
 
     &::-webkit-scrollbar {
         display: none;