Remove manual height manipulation in Extension Editor (#11605)

Fixes a bug where content was hidden after the React 18 uplift
eclipse-theia · Aug 24, 2022 · 19644aa · 19644aa
1 parent 73260a1
commit 19644aa
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 16 deletions.
diff --git a/packages/vsx-registry/src/browser/style/index.css b/packages/vsx-registry/src/browser/style/index.css
@@ -153,15 +153,12 @@
     padding: calc(var(--theia-ui-padding) * 3) calc(var(--theia-ui-padding) * 3) calc(var(--theia-ui-padding) * 3);
     flex-shrink: 0;
     border-bottom: 1px solid hsla(0, 0% ,50% ,.5);
-    position: sticky;
-    top: 0;
     width: 100%;
     background: var(--theia-editor-background);
 }
 
 .theia-vsx-extension-editor .scroll-container {
-    position: absolute;
-    bottom: 0;
+    position: relative;
     padding-top: 0;
     max-width: 100%;
     width: 100%;

diff --git a/packages/vsx-registry/src/browser/vsx-extension.tsx b/packages/vsx-registry/src/browser/vsx-extension.tsx
@@ -497,11 +497,10 @@ export class VSXExtensionEditorComponent extends AbstractVSXExtensionComponent {
             averageRating, downloadCount, repository, license, readme
         } = this.props.extension;
 
-        const { baseStyle, scrollStyle } = this.getSubcomponentStyles();
         const sanitizedReadme = !!readme ? DOMPurify.sanitize(readme) : undefined;
 
         return <React.Fragment>
-            <div className='header' style={baseStyle} ref={ref => this.header = (ref || undefined)}>
+            <div className='header' ref={ref => this.header = (ref || undefined)}>
                 {iconUrl ?
                     <img className='icon-container' src={iconUrl} /> :
                     <div className='icon-container placeholder' />}
@@ -534,12 +533,10 @@ export class VSXExtensionEditorComponent extends AbstractVSXExtensionComponent {
             {
                 sanitizedReadme &&
                 <div className='scroll-container'
-                    style={scrollStyle}
                     ref={ref => this._scrollContainer = (ref || undefined)}>
                     <div className='body'
                         ref={ref => this.body = (ref || undefined)}
                         onClick={this.openLink}
-                        style={baseStyle}
                         // eslint-disable-next-line react/no-danger
                         dangerouslySetInnerHTML={{ __html: sanitizedReadme }}
                     />
@@ -578,14 +575,6 @@ export class VSXExtensionEditorComponent extends AbstractVSXExtensionComponent {
         </React.Fragment>;
     }
 
-    protected getSubcomponentStyles(): { baseStyle: React.CSSProperties, scrollStyle: React.CSSProperties; } {
-        const visibility: 'unset' | 'hidden' = this.header ? 'unset' : 'hidden';
-        const baseStyle = { visibility };
-        const scrollStyle = this.header?.clientHeight ? { visibility, height: `calc(100% - (${this.header.clientHeight}px + 1px))` } : baseStyle;
-
-        return { baseStyle, scrollStyle };
-    }
-
     // TODO replace with webview
     readonly openLink = (event: React.MouseEvent) => {
         if (!this.body) {