#58 backlog scrolling tweak

- do not scroll whole left-side area
- scroll stories, form stays fixed

client/app/components/Backlog.js

@@ -6,6 +6,7 @@ import {showTrash, hideTrash} from '../actions';
 import BacklogActive from './BacklogActive';
 import BacklogTrash from './BacklogTrash';
 import {StyledBacklog} from '../styled/Backlog';
+import StoryAddForm from './StoryAddForm';
 
 /**
  * The backlog contains two display modes:  active and trash
@@ -34,6 +35,7 @@ const Backlog = ({
       />
 
       {trashShown && <BacklogTrash />}
+      {!trashShown && <StoryAddForm />}
       {!trashShown && <BacklogActive />}
     </StyledBacklog>
   );

client/app/components/BacklogActive.js

@@ -3,7 +3,6 @@ import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 import {useDropzone} from 'react-dropzone';
 
-import StoryAddForm from './StoryAddForm';
 import StoryEditForm from './StoryEditForm';
 import Story from './Story';
 
@@ -44,8 +43,6 @@ const BacklogActive = ({t, stories, importCsvFile}) => {
         isReject={isDragReject}
       ></StyledFileImportDropZoneOverlay>
 
-      <StoryAddForm />
-
       {hasActiveStories && (
         <StyledStories>
           {activeStories.map((story) =>

client/app/components/BacklogTrash.js

@@ -3,7 +3,7 @@ import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 
 import TrashedStory from './TrashedStory';
-import {StyledBacklogInfoText, StyledStories} from '../styled/Backlog';
+import {StyledBacklogInfoText, StyledStoriesScrolling} from '../styled/Backlog';
 
 /**
  *
@@ -15,11 +15,11 @@ const BacklogTrash = ({t, stories}) => {
   return (
     <React.Fragment>
       {hasTrashedStories && (
-        <StyledStories>
+        <StyledStoriesScrolling>
           {trashedStories.map((story) => (
             <TrashedStory story={story} key={story.id} />
           ))}
-        </StyledStories>
+        </StyledStoriesScrolling>
       )}
       {!hasTrashedStories && <StyledBacklogInfoText>{t('trashEmpty')}</StyledBacklogInfoText>}
     </React.Fragment>

client/app/styled/Backlog.js

@@ -12,10 +12,13 @@ export const StyledBacklog = styled.div`
   left: ${({shown}) => (shown ? LEFT_MENU_WIDTH + 'px' : '0')};
   bottom: 0;
   z-index: 1000;
-  overflow-y: auto;
   box-sizing: border-box;
   padding-top: 44px;
   background: ${COLOR_BACKGROUND_GREY};
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
 
   @media (min-width: ${MEDIA_MIN_WIDTH_THRESH}) {
     left: ${LEFT_MENU_WIDTH}px;
@@ -35,6 +38,10 @@ export const StyledStories = styled.div`
   margin: 16px 8px 0 8px;
 `;
 
+export const StyledStoriesScrolling = styled(StyledStories)`
+  overflow-y: auto;
+`;
+
 export const StyledEditForm = styled.form`
   background: #fff;
   box-sizing: border-box;
@@ -74,7 +81,8 @@ export const StyledBacklogInfoText = styled.div`
 export const StyledFileImportDropZone = styled.div`
   outline: none;
   border: none;
-  min-height: 90%;
+  overflow: auto;
+  flex-grow: 1;
 `;
 
 const dzOverlayAcceptBorder = '4px dashed rgba(0, 153, 204, 0.25)';