microsoft · cwhitten · Jan 9, 2023 · Dec 22, 2022 · Dec 28, 2022
diff --git a/Composer/packages/adaptive-form/src/components/CollapseField.tsx b/Composer/packages/adaptive-form/src/components/CollapseField.tsx
@@ -29,7 +29,7 @@ const styles = {
     display: flex;
     margin: 4px -18px;
     align-items: center;
-    width: 100%;
+    width: auto;
   `,
 };
 

diff --git a/Composer/packages/client/src/components/Page.tsx b/Composer/packages/client/src/components/Page.tsx
@@ -187,7 +187,7 @@ const Page: React.FC<IPageProps> = (props) => {
         resetOnDoubleClick
         initialPrimarySize="20%"
         minPrimarySize="200px"
-        minSecondarySize="800px"
+        minSecondarySize="750px"
         renderSplitter={renderThinSplitter}
         onMeasuredSizesChanged={onMeasuredSizesChanged}
       >

diff --git a/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx b/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { jsx, css } from '@emotion/react';
 import { useState, Fragment } from 'react';
 import formatMessage from 'format-message';
 import { useRecoilValue } from 'recoil';
@@ -29,6 +29,10 @@ type Package = {
   packageName?: string;
 };
 
+const tableOverflowStyle = css`
+  overflow: hidden;
+`;
+
 const ExternalAdapterSettings = (props: Props) => {
   const { projectId } = props;
 
@@ -54,7 +58,7 @@ const ExternalAdapterSettings = (props: Props) => {
   if (schemaDefinitions == null) return null;
 
   const externalServices = (schemas: (JSONSchema7 & Package)[]) => (
-    <div role="table">
+    <div css={tableOverflowStyle} role="table">
       <div css={tableHeaderRow} role="row">
         <div css={tableColumnHeader(columnSizes[0])} role="columnheader">
           {formatMessage('Name')}

diff --git a/...es/client/src/pages/design/DebugPanel/TabExtensions/RuntimeOutputLog/OutputTabContent.tsx b/...es/client/src/pages/design/DebugPanel/TabExtensions/RuntimeOutputLog/OutputTabContent.tsx
@@ -112,9 +112,9 @@ export const OutputsTabContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
     >
       <Split
         resetOnDoubleClick
-        initialPrimarySize="200px"
-        minPrimarySize="250px"
-        minSecondarySize="600px"
+        initialPrimarySize="20%"
+        minPrimarySize="200px"
+        minSecondarySize="700px"
         renderSplitter={renderThinSplitter}
         splitterSize="5px"
       >

diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -47,7 +47,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
           resetOnDoubleClick
           initialPrimarySize="20%"
           minPrimarySize="200px"
-          minSecondarySize="800px"
+          minSecondarySize="750px"
           renderSplitter={renderThinSplitter}
           splitterSize="5px"
           onMeasuredSizesChanged={onMeasuredSizesChanged}
@@ -67,8 +67,8 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
                 <Split
                   resetOnDoubleClick
                   initialPrimarySize="65%"
-                  minPrimarySize="500px"
-                  minSecondarySize="350px"
+                  minPrimarySize="450px"
+                  minSecondarySize="300px"
                   renderSplitter={renderThinSplitter}
                 >
                   <VisualPanel projectId={activeBot} />

diff --git a/Composer/packages/client/src/pages/design/styles.ts b/Composer/packages/client/src/pages/design/styles.ts
@@ -76,11 +76,6 @@ export const splitPaneWrapper = css`
   flex-grow: 1;
   overflow: hidden;
   height: 100%;
-  @media screen and (max-width: 1080px) {
-    .secondary {
-      padding-right: 40px;
-    }
-  }
 `;
 
 export const visualPanel = css`

diff --git a/Composer/packages/client/src/pages/form-dialog/FormDialogPage.tsx b/Composer/packages/client/src/pages/form-dialog/FormDialogPage.tsx
@@ -198,7 +198,7 @@ const FormDialogPage: React.FC<Props> = React.memo((props: Props) => {
           resetOnDoubleClick
           initialPrimarySize="320px"
           minPrimarySize="320px"
-          minSecondarySize="800px"
+          minSecondarySize="630px"
           renderSplitter={renderThinSplitter}
           onMeasuredSizesChanged={onMeasuredSizesChanged}
         >

diff --git a/Composer/packages/client/src/pages/home/styles.ts b/Composer/packages/client/src/pages/home/styles.ts
@@ -29,15 +29,18 @@ export const leftPage = css`
   padding: 0 24px 24px 24px;
   display: flex;
   flex-direction: column;
+  max-width: 100%;
+  overflow: hidden;
 `;
 
 export const rightPage = css`
   flex: 1;
   padding-right: 24px;
   display: flex;
   flex-direction: column;
-  position: sticky;
-  left: 0;
+  @media (max-width: 1024px) {
+    flex: 50%;
+  }
 `;
 
 export const title = css`
@@ -64,6 +67,9 @@ export const introduction = css`
 export const rowContainer = css`
   display: flex;
   margin-top: 12px;
+  overflow-x: auto;
+  padding-bottom: 12px;
+  gap: 12px;
 `;
 
 export const recentBotsContainer = css`
@@ -88,9 +94,11 @@ export const pivotContainer = css`
 `;
 
 export const tabRowContainer = css`
-  flex-wrap: wrap;
   display: flex;
   clear: both;
+  overflow-x: auto;
+  padding-bottom: 12px;
+  gap: 12px;
 `;
 
 export const tabRowViewMore = css`
@@ -109,7 +117,8 @@ export const tabRowViewMore = css`
 
 export const cardWrapper = css`
   display: flex;
-  margin-right: 12px;
+  flex-basis: 25%;
+  min-width: ${ImageCoverWidth}px;
 `;
 
 export const itemContainerWrapper = (disabled?: boolean) => css`
@@ -188,16 +197,7 @@ export const newsDescription = css`
 export const cardItem = {
   container: css`
     font-size: ${fonts.medium.fontSize};
-    margin: 12px 0 0 12px;
-    &:first-child {
-      margin-left: 0;
-    }
     padding: 12px;
-    min-width: ${ImageCoverWidth}px;
-    width: 17vw;
-    @media (max-width: 1416px) {
-      width: 20vw;
-    }
     text-align: left;
     border: 1px #efedeb solid;
     box-shadow: ${Depths.depth4};
@@ -329,9 +329,8 @@ export const whatsNewsContainer = css`
   border-radius: 5px;
   margin: 20px 0 24px 0;
   background: #f6f6f6;
-  @media (max-width: 1416px) {
+  @media (max-width: 1024px) {
     background: none;
-    min-width: 200px;
     margin: 15px 0 0 0;
   }
 `;

diff --git a/Composer/packages/client/src/pages/publish/Publish.tsx b/Composer/packages/client/src/pages/publish/Publish.tsx
@@ -2,8 +2,8 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { useState, useEffect, useMemo, Fragment, useRef } from 'react';
+import { jsx, css } from '@emotion/react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { navigate, RouteComponentProps } from '@reach/router';
 import formatMessage from 'format-message';
 import { useRecoilValue } from 'recoil';
@@ -55,6 +55,19 @@ const SKILL_PUBLISH_STATUS = {
   PUBLISHED: 'published',
   CANCEL: 'cancel',
 };
+
+const publishContainerStyle = css`
+  display: flex;
+  flex-flow: column nowrap;
+  height: calc(100% - 1px);
+`;
+
+const publishPivotStyle = css`
+  flex: auto;
+  display: flex;
+  flex-flow: column nowrap;
+`;
+
 const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: string }>> = (props) => {
   const { projectId = '' } = props;
   const botProjectData = useRecoilValue(localBotsDataSelector);
@@ -425,7 +438,7 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
   };
 
   return (
-    <Fragment>
+    <div css={publishContainerStyle}>
       {publishDialogVisible && (
         <PublishDialog
           items={selectedBots.filter((bot) => !!bot.publishTarget)}
@@ -461,8 +474,9 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
       </div>
 
       <Pivot
+        css={publishPivotStyle}
         selectedKey={activeTab}
-        styles={{ root: { marginLeft: 12 } }}
+        styles={{ root: { marginLeft: 12 }, itemContainer: { flex: 'auto', '> div': { height: '100%' } } }}
         onLinkClick={(link) => {
           setActiveTab(link?.props?.itemKey || '');
           if (link?.props.itemKey) {
@@ -488,7 +502,7 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
           </div>
         </PivotItem>
         <PivotItem headerText={formatMessage('Publishing profile')} itemKey={'addNewPublishProfile'}>
-          <Stack horizontal verticalFill styles={{ root: { borderTop: '1px solid #CCC' } }}>
+          <Stack horizontal verticalFill styles={{ root: { borderTop: '1px solid #CCC', height: '100%' } }}>
             {botProjectData && botProjectData.length > 1 && (
               <Stack.Item styles={{ root: { width: '175px', borderRight: '1px solid #CCC' } }}>
                 <ProjectList
@@ -504,7 +518,7 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
           </Stack>
         </PivotItem>
       </Pivot>
-    </Fragment>
+    </div>
   );
 };
 

diff --git a/Composer/packages/client/src/pages/setting/SettingsPage.tsx b/Composer/packages/client/src/pages/setting/SettingsPage.tsx
@@ -37,7 +37,7 @@ const pageWrapper = css`
   overflow: auto;
   height: 100%;
   > div {
-    min-width: 1030px;
+    min-width: 960px;
     min-height: 400px;
   }
 `;

diff --git a/Composer/packages/client/src/router.tsx b/Composer/packages/client/src/router.tsx
@@ -174,7 +174,7 @@ const projectWrapper = css`
 
 const projectStyle = css`
   flex: auto;
-  min-width: 1030px;
+  min-width: 960px;
   min-height: 400px;
 
   & > div {

diff --git a/Composer/packages/electron-server/locales/en-US.json b/Composer/packages/electron-server/locales/en-US.json
@@ -122,4 +122,4 @@
   "zoom_out_dc7d60d2": {
     "message": "Zoom Out"
   }
-}
+}
diff --git a/Composer/packages/server/src/locales/en-US.json b/Composer/packages/server/src/locales/en-US.json
@@ -3404,6 +3404,9 @@
   "search_for_extensions_on_npm_c5ca65d9": {
     "message": "Search for extensions on npm"
   },
+  "search_for_the_query_found_count_plural_1_one_resu_da1e5732": {
+    "message": "Search for the { query }. Found { count, plural,\n     =1 {one result}\n  other {# results}\n}"
+  },
   "search_functions_4a1afbc3": {
     "message": "Search functions"
   },
@@ -3980,6 +3983,9 @@
   "the_trigger_triggername_has_been_created_eed0c973": {
     "message": "The trigger { triggerName } has been created"
   },
+  "the_trigger_triggername_has_been_deleted_b7d630f8": {
+    "message": "The trigger { triggerName } has been deleted"
+  },
   "the_user_input_page_is_where_the_language_understa_c9262f3f": {
     "message": "The User Input page is where the Language Understanding editor locates. From here users can view all the Language Understanding templates and edit them."
   },

diff --git a/extensions/packageManager/src/components/styles.ts b/extensions/packageManager/src/components/styles.ts
@@ -62,7 +62,7 @@ export const targetListTiTle = css`
 export const listRoot = css`
   height: calc(100% - 48px);
   position: relative;
-  overflow-y: auto;
+  min-width: 512px;
   flex-grow: 1;
   display: flex;
   flex-direction: column;

diff --git a/extensions/packageManager/src/pages/Library.tsx b/extensions/packageManager/src/pages/Library.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { jsx, css } from '@emotion/react';
 import styled from '@emotion/styled';
 import React, { useState, Fragment, useEffect } from 'react';
 import formatMessage from 'format-message';
@@ -79,6 +79,15 @@ const InstallButtonVersion = styled.span`
   label: install-button-version;
 `;
 
+const tabsStackStyle = css`
+  min-width: 512px;
+  overflow: auto;
+`;
+
+const fieldStyles = {
+  root: { maxWidth: '200px' },
+};
+
 const Library: React.FC = () => {
   const [items, setItems] = useState<LibraryRef[]>([]);
   const { projectId, reloadProject, projectCollection: allProjectCollection, stopBot } = useProjectApi();
@@ -673,27 +682,23 @@ const Library: React.FC = () => {
               </Pivot>
             </Stack.Item>
             <Stack.Item align="end" grow={1}>
-              <Stack horizontal horizontalAlign="end" tokens={{ childrenGap: 10 }}>
+              <Stack horizontal css={tabsStackStyle} horizontalAlign="center" tokens={{ childrenGap: 10 }}>
                 <Stack.Item>
                   <Dropdown
                     ariaLabel={formatMessage('Feeds')}
                     hidden={currentTab !== TABS.BROWSE}
                     options={feeds}
                     placeholder="Format"
                     selectedKey={feed}
-                    styles={{
-                      root: { width: '200px' },
-                    }}
+                    styles={fieldStyles}
                     onChange={onChangeFeed}
                   ></Dropdown>
                 </Stack.Item>
                 <Stack.Item>
                   <SearchBox
                     disabled={!feeds || !feed || (!searchTerm && items.length === 0)}
                     placeholder="Search"
-                    styles={{
-                      root: { width: '200px' },
-                    }}
+                    styles={fieldStyles}
                     onClear={() => setSearchTerm('')}
                     onSearch={setSearchTerm}
                   />