From c1b74266eb03516ca85465261d38e6da8f98e1fb Mon Sep 17 00:00:00 2001
From: Tanuj Mittal <tamitta@microsoft.com>
Date: Wed, 10 Mar 2021 00:12:54 +0530
Subject: [PATCH] Gallery fixes (#514)

- Fix COC overlay height
- Make standalone gallery usable on mobile devices

Before:
![image](https://user-images.githubusercontent.com/693092/110415215-81cd0680-80b7-11eb-8000-bd0b8536607a.png)

After:
![image](https://user-images.githubusercontent.com/693092/110415236-898cab00-80b7-11eb-8266-94a5718113fe.png)
---
 .../Controls/NotebookGallery/GalleryViewerComponent.less        | 2 +-
 .../Controls/NotebookGallery/GalleryViewerComponent.tsx         | 2 +-
 .../__snapshots__/GalleryViewerComponent.test.tsx.snap          | 2 ++
 src/GalleryViewer/GalleryViewer.tsx                             | 2 +-
 4 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.less b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.less
index 2fcbdd780..53151cc28 100644
--- a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.less
+++ b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.less
@@ -11,7 +11,7 @@
 
 .publicGalleryTabContainer {
   position: relative;
-  height: 100vh;
+  min-height: 100vh;
 }
 
 .publicGalleryTabOverlayContent {
diff --git a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
index 43aac2d1c..3435b779c 100644
--- a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
@@ -388,7 +388,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private createSearchBarHeader(content: JSX.Element): JSX.Element {
     return (
       <Stack tokens={{ childrenGap: 10 }}>
-        <Stack horizontal tokens={{ childrenGap: 20, padding: 10 }}>
+        <Stack horizontal wrap tokens={{ childrenGap: 20, padding: 10 }}>
           <Stack.Item grow>
             <SearchBox value={this.state.searchText} placeholder="Search" onChange={this.onSearchBoxChange} />
           </Stack.Item>
diff --git a/src/Explorer/Controls/NotebookGallery/__snapshots__/GalleryViewerComponent.test.tsx.snap b/src/Explorer/Controls/NotebookGallery/__snapshots__/GalleryViewerComponent.test.tsx.snap
index fa9c096e5..1a26cbe39 100644
--- a/src/Explorer/Controls/NotebookGallery/__snapshots__/GalleryViewerComponent.test.tsx.snap
+++ b/src/Explorer/Controls/NotebookGallery/__snapshots__/GalleryViewerComponent.test.tsx.snap
@@ -36,6 +36,7 @@ exports[`GalleryViewerComponent renders 1`] = `
                 "padding": 10,
               }
             }
+            wrap={true}
           >
             <StackItem
               grow={true}
@@ -121,6 +122,7 @@ exports[`GalleryViewerComponent renders 1`] = `
               "padding": 10,
             }
           }
+          wrap={true}
         >
           <StackItem
             grow={true}
diff --git a/src/GalleryViewer/GalleryViewer.tsx b/src/GalleryViewer/GalleryViewer.tsx
index ae10c2d62..61032e24e 100644
--- a/src/GalleryViewer/GalleryViewer.tsx
+++ b/src/GalleryViewer/GalleryViewer.tsx
@@ -36,7 +36,7 @@ const onInit = async () => {
       <header>
         <GalleryHeaderComponent />
       </header>
-      <div style={{ marginLeft: 138, marginRight: 138 }}>
+      <div style={{ margin: "auto", width: "85%" }}>
         <div style={{ paddingLeft: 26, paddingRight: 26, paddingTop: 20 }}>
           <Text block>
             Welcome to the Azure Cosmos DB notebooks gallery! View the sample notebooks to learn about use cases, best