[Discover] Fix more UI

src/plugins/data/public/data_sources/datasource_selector/datasource_selectable.tsx

@@ -103,6 +103,7 @@ export const DataSourceSelectable = ({
   setDataSourceOptionList,
   onGetDataSetError, //   onGetDataSetError, Callback for handling get data set errors. Ensure it's memoized.
   singleSelection = { asPlainText: true },
+  ...comboBoxProps
 }: DataSourceSelectableProps) => {
   // This effect gets data sets and prepares the datasource list for UI rendering.
   useEffect(() => {
@@ -120,6 +121,7 @@ export const DataSourceSelectable = ({
 
   return (
     <EuiComboBox
+      {...comboBoxProps}
       data-test-subj="dataExplorerDSSelect"
       placeholder={i18n.translate('data.datasource.selectADatasource', {
         defaultMessage: 'Select a datasource',

src/plugins/data/public/data_sources/datasource_selector/types.ts

@@ -7,7 +7,7 @@
  * @experimental These interfaces are experimental and might change in future releases.
  */
 
-import { EuiComboBoxSingleSelectionShape } from '@elastic/eui';
+import { EuiComboBoxProps, EuiComboBoxSingleSelectionShape } from '@elastic/eui';
 import { GenericDataSource } from '../datasource_services';
 
 export interface DataSourceGroup {
@@ -22,7 +22,7 @@ export interface DataSourceOption {
   ds: GenericDataSource;
 }
 
-export interface DataSourceSelectableProps {
+export interface DataSourceSelectableProps extends Pick<EuiComboBoxProps<unknown>, 'fullWidth'> {
   dataSources: GenericDataSource[];
   onDataSourceSelect: (dataSourceOption: DataSourceOption[]) => void;
   singleSelection?: boolean | EuiComboBoxSingleSelectionShape;

src/plugins/data_explorer/public/components/app_container.tsx

@@ -36,7 +36,7 @@ export const AppContainer = ({ view, params }: { view?: View; params: AppMountPa
                 <EuiResizablePanel
                   initialSize={20}
                   minSize="260px"
-                  mode="collapsible"
+                  mode={['collapsible', { position: 'top' }]}
                   paddingSize="none"
                 >
                   <Sidebar>

src/plugins/data_explorer/public/components/sidebar/index.tsx

@@ -111,6 +111,7 @@ export const Sidebar: FC = ({ children }) => {
             onDataSourceSelect={handleSourceSelection}
             selectedSources={selectedSources}
             onGetDataSetError={handleGetDataSetError}
+            fullWidth
           />
         </EuiSplitPanel.Inner>
         <EuiSplitPanel.Inner paddingSize="none" color="transparent" className="eui-yScroll">

src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx

@@ -217,7 +217,6 @@ export const DataGridTable = ({
         paddingSize: 'none' as const,
         style: {
           margin: '0px',
-          marginLeft: '8px',
         },
         color: 'transparent' as const,
       };

src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss

@@ -1,3 +1,7 @@
+.osdDocTable_expandedRow {
+  border-top: none !important;
+}
+
 .osdDocTableCell__toggleDetails {
   padding: 4px 0 0 !important;
 }

src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx

@@ -96,11 +96,11 @@ export const TableRow = ({
 
         if (!fieldInfo?.filterable) {
           return (
-            // eslint-disable-next-line react/no-danger
             <td
               data-test-subj="docTableField"
               className="osdDocTableCell eui-textBreakAll eui-textBreakWord"
             >
+              {/* eslint-disable-next-line react/no-danger */}
               <span dangerouslySetInnerHTML={{ __html: sanitizedCellValue }} />
             </td>
           );
@@ -120,11 +120,8 @@ export const TableRow = ({
 
   const expandedTableRow = (
     <tr>
-      <td
-        style={{ borderTop: 'none', background: 'white', padding: '5px' }}
-        colSpan={columnIds.length + 2}
-      >
-        <EuiFlexGroup>
+      <td className="osdDocTable_expandedRow" colSpan={columnIds.length + 1}>
+        <EuiFlexGroup justifyContent="center" alignItems="center">
           <EuiFlexItem grow={false}>
             <EuiIcon type="folderOpen" />
           </EuiFlexItem>

src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss

@@ -6,6 +6,10 @@
   /* stylelint-disable-next-line */
   container-name: canvas;
   height: 100%;
+
+  &_results {
+    margin-left: $euiSizeM;
+  }
 }
 
 // TopNav styles for the Discover

src/plugins/discover/public/application/view_components/canvas/index.tsx

@@ -112,12 +112,10 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
       )}
       {fetchState.status === ResultStatus.LOADING && <LoadingSpinner />}
       {fetchState.status === ResultStatus.READY && (
-        <>
-          <EuiPanel hasBorder={false} hasShadow={false} color="transparent" paddingSize="none">
-            <MemoizedDiscoverChartContainer {...fetchState} />
-          </EuiPanel>
+        <EuiPanel hasShadow={false} paddingSize="none" className="dscCanvas_results">
+          <MemoizedDiscoverChartContainer {...fetchState} />
           <MemoizedDiscoverTable rows={rows} />
-        </>
+        </EuiPanel>
       )}
     </EuiPanel>
   );