Fix: try-it experience layout (#1495)

microsoftgraph · Mar 2, 2022 · 2cb40b6 · 2cb40b6
1 parent 9e9e8b5
commit 2cb40b6
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 28 deletions.
diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx
@@ -281,6 +281,7 @@ class App extends Component<IAppProps, IAppState> {
     if (showSidebar) {
       this.changeDimensions('26%');
     }
+
     // @ts-ignore
     this.props.actions!.toggleSidebar(properties);
 
@@ -299,9 +300,9 @@ class App extends Component<IAppProps, IAppState> {
           <Authentication />
         </div>
         {minimised &&
-        <div className={minimised ? '' : 'col-2'} style={{position:'relative', left: '-9px'}}>
-          <FeedbackButton />
-        </div>
+          <div className={minimised ? '' : 'col-2'} style={{ position: 'relative', left: '-9px' }}>
+            <FeedbackButton />
+          </div>
         }
         <div className={minimised ? '' : 'col-2'}>
           <Settings />
@@ -343,6 +344,27 @@ class App extends Component<IAppProps, IAppState> {
     return width;
   }
 
+  private shouldDisplayContent(parameters: any) {
+    const { graphExplorerMode, mobileScreen, showSidebar } = parameters;
+    return !(graphExplorerMode === Mode.Complete && mobileScreen && showSidebar);
+  }
+
+  private removeFlexBasisProperty() {
+    /*
+    flex-basis style property is added automatically when the window resizes
+    and is set to 100% leading to a distortion of the page when these exact steps are followed.
+    https://github.com/microsoftgraph/microsoft-graph-explorer-v4/pull/1433#issuecomment-1036135231
+    Removing the property altogether helps maintain the layout of the page.
+    */
+
+    const collection = document.getElementsByClassName('layout');
+    if (collection?.length === 0) {
+      return;
+    }
+    const element: any = collection[0];
+    element.style.removeProperty('flex-basis');
+  }
+
   public render() {
     const classes = classNames(this.props);
     const { authenticated, graphExplorerMode, minimised, sampleQuery,
@@ -359,7 +381,10 @@ class App extends Component<IAppProps, IAppState> {
     const query = createShareLink(sampleQuery, authenticated);
     const { mobileScreen, showSidebar } = sidebarProperties;
 
-    const displayContent = shouldDisplayContent();
+    const displayContent = this.shouldDisplayContent({
+      graphExplorerMode,
+      mobileScreen, showSidebar
+    });
 
     const stackTokens: IStackTokens = {
       childrenGap: 10,
@@ -377,7 +402,7 @@ class App extends Component<IAppProps, IAppState> {
       sidebarWidth = classes.sidebarMini;
     }
 
-    removeFlexBasisProperty();
+    this.removeFlexBasisProperty();
 
     return (
       // @ts-ignore
@@ -448,7 +473,7 @@ class App extends Component<IAppProps, IAppState> {
                   right: false
                 }}
                 size={{
-                  width: contentWidth,
+                  width: graphExplorerMode === Mode.TryIt ? '100%' : contentWidth,
                   height: '98vh'
                 }}
               >
@@ -469,27 +494,6 @@ class App extends Component<IAppProps, IAppState> {
         </div>
       </ThemeContext.Provider>
     );
-
-    function shouldDisplayContent() {
-      return !(graphExplorerMode === Mode.Complete && mobileScreen && showSidebar);
-    }
-
-    function removeFlexBasisProperty() {
-      /*
-      flex-basis style property is added automatically when the window resizes
-      and is set to 100% leading to a distortion of the page when these exact steps are followed.
-      https://github.com/microsoftgraph/microsoft-graph-explorer-v4/pull/1433#issuecomment-1036135231
-
-      Removing the property altogether helps maintain the layout of the page.
-      */
-
-      const collection = document.getElementsByClassName('layout');
-      if (collection?.length === 0) {
-        return;
-      }
-      const element: any = collection[0];
-      element.style.removeProperty('flex-basis');
-    }
   }
 }
 

diff --git a/src/app/views/app-sections/HeaderMessaging.tsx b/src/app/views/app-sections/HeaderMessaging.tsx
@@ -10,7 +10,7 @@ export function headerMessaging(classes: any, query: string): React.ReactNode {
   const loginType = getLoginType();
 
   return (
-    <div style={{ marginBottom: 8 }}>
+    <div style={{ marginBottom: 8, paddingLeft: 10 }}>
       {loginType === LoginType.Popup && <>
         <MessageBar messageBarType={MessageBarType.info} isMultiline={true}>
           <p>