From c107131fe55d6d8a5d08bf5fd3d2c1502c67028e Mon Sep 17 00:00:00 2001
From: Pontus Lurcock <pontus.lurcock@brockmann-consult.de>
Date: Tue, 18 Aug 2020 11:08:28 +0200
Subject: [PATCH] Fix width of data store selector

Fixes item "Fix data store selector being too slim in width in DATA
SOURCES panel." of sub-issue
https://github.com/CCI-Tools/cate-webui/issues/12#issue-572727073 of
Issue #12.
---
 src/renderer/containers/DataSourcesPanel.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/renderer/containers/DataSourcesPanel.tsx b/src/renderer/containers/DataSourcesPanel.tsx
index a30e047..2f1fbb2 100644
--- a/src/renderer/containers/DataSourcesPanel.tsx
+++ b/src/renderer/containers/DataSourcesPanel.tsx
@@ -126,6 +126,10 @@ class DataSourcesPanel extends React.Component<IDataSourcesPanelProps & IDataSou
 
     private static readonly FLEX_ROW_STYLE: CSSProperties = {display: 'flex', alignItems: 'center', marginBottom: 1};
     private static readonly SPACER_STYLE: CSSProperties = {flex: 1};
+    private static readonly LABEL_STYLE: CSSProperties = {margin: '0 0.5em 0 0', display: 'flex', flexGrow: 1};
+    private static readonly LABEL_TEXT_STYLE: CSSProperties =
+            {minWidth: '5em', overflow: 'hidden', whiteSpace: 'nowrap'};
+    private static readonly SELECT_STYLE: CSSProperties = {flexGrow: 1};
 
     constructor(props: IDataSourcesPanelProps & IDataSourcesPanelDispatch) {
         super(props);
@@ -363,17 +367,18 @@ class DataSourcesPanel extends React.Component<IDataSourcesPanelProps & IDataSou
         return (
             <React.Fragment>
                 <div style={DataSourcesPanel.FLEX_ROW_STYLE}>
-                    <Label className="bp3-inline" style={{margin: '0 0 0 0'}}>
-                        Data store:
+                    <Label className="bp3-inline"
+                           style={DataSourcesPanel.LABEL_STYLE}>
+                        <span style={DataSourcesPanel.LABEL_TEXT_STYLE}>Data store:</span>
                         <HTMLSelect
-                            style={{padding: '0.2em'}}
+                            fill={true}
+                            style={DataSourcesPanel.SELECT_STYLE}
                             value={selectedDataStore ? selectedDataStore.id : ''}
                             onChange={this.handleDataStoreSelected}
                         >
                             {dataStoreOptions}
                         </HTMLSelect>
                     </Label>
-                    <span style={DataSourcesPanel.SPACER_STYLE}/>
                     <ButtonGroup>
                         <ToolButton
                             tooltipContent="Show/hide data store description"