Fix some incorrect css values

Author: swissspidy

packages/dashboard/src/app/views/myStories/content/storyGridItem/components.js

@@ -92,7 +92,6 @@ export const CardDetailsGrid = styled.div`
 `;
 export const CardDetailsColumn = styled.div`
   display: flex;
-  align-items: space-between;
   flex-direction: column;
   align-self: flex-end;
 `;

packages/dashboard/src/components/table/index.js

@@ -119,7 +119,8 @@ export const TableRow = styled.tr`
 export const TableCell = styled.td`
   padding: ${CELL_PADDING}px;
   font-weight: normal;
-  word-break: break-word;
+  overflow-wrap: anywhere;
+  word-break: normal;
   height: ${CELL_PADDING * 2 + 50}px;
   vertical-align: middle;
 

packages/design-system/src/components/button/stories/index.js

@@ -60,7 +60,6 @@ const Container = styled.div`
   border: 1px solid ${(props) => props.theme.colors.fg.black};
 
   display: flex;
-  align-items: space-evenly;
   flex-direction: column;
   padding: 20px;
 `;

packages/story-editor/src/components/canvas/mediaCaptions/cue.js

@@ -45,7 +45,7 @@ const Section = styled.span`
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
   line-height: 1.4;
-  word-break: break-word;
+  word-break: normal;
   word-wrap: break-word;
   overflow-wrap: break-word;
 `;

packages/story-editor/src/components/footer/carousel/carouselList.js

@@ -48,7 +48,6 @@ const PageList = styled(Reorderable).attrs({
     hasOverflow &&
     css`
       overflow-x: visible;
-      overflow-x: overlay;
       justify-content: flex-start;
     `};
 

packages/story-editor/src/components/footer/gridview/gridView.js

@@ -76,7 +76,6 @@ const TopRow = styled.header`
 const Wrapper = styled(Reorderable)`
   position: relative;
   overflow-y: auto;
-  overflow-y: overlay;
   overflow-x: hidden;
   flex-grow: 1;
   display: flex;

packages/story-editor/src/components/panels/design/alignment/alignment.js

@@ -46,7 +46,6 @@ const ElementRow = styled.div`
   align-items: center;
   padding: 16px;
   overflow: auto;
-  overflow: overlay;
 `;
 
 const alignmentButtonIds = [

packages/story-editor/src/components/panels/panel/shared/title.js

@@ -62,7 +62,6 @@ const Heading = styled.span`
   color: ${({ theme, isCollapsed }) =>
     isCollapsed ? theme.colors.fg.secondary : theme.colors.fg.primary};
   display: flex;
-  align-items: space-between;
   ${({ theme }) =>
     themeHelpers.expandPresetStyles({
       preset: theme.typography.presets.headline[TextSize.XXSmall],

packages/story-editor/src/components/sidebar/sidebarContent.js

@@ -26,7 +26,7 @@ import { getTabId } from './utils';
 
 const SidebarPane = styled.div.attrs({ role: 'tabpanel' })`
   height: 100%;
-  overflow: overlay;
+  overflow: auto;
 `;
 
 const SidebarPanes = styled.section`

packages/story-editor/src/components/thumbnail/styles.js

@@ -147,7 +147,7 @@ export const Background = styled.div(
     css`
       /* Specific overrides for PagePreview that is borrowed for checklist's thumbnails */
       .pagePreviewOverrides {
-        border-color: none;
+        border-color: transparent;
 
         &::after {
           content: none;