1 files changed, 40 insertions, 23 deletions

diff --git a/src/PatternTable.tsx b/src/PatternTable.tsx
index e514551..075cafe 100644
--- a/src/PatternTable.tsx
+++ b/src/PatternTable.tsx
@@ -18,12 +18,12 @@ import { PatternEntry, PatternEntryColor } from './pattern';
 import { GCalendarMeta } from './gapi';
 
 const styles = (theme: Theme): StyleRules => ({
-    deleteButton: {
+    deleteButtonRow: {
         width: 0,
         position: 'absolute',
         paddingRight: '24px',
         right: 0,
-        lineHeight: '48px',
+        lineHeight: '47px',
     },
     deleteButtonHide: {
         display: 'none'
@@ -32,15 +32,22 @@ const styles = (theme: Theme): StyleRules => ({
         backgroundColor: theme.palette.background.default,
         zIndex: 1
     },
-    deleteIcon: {
+    deleteButton: {
         position: 'absolute',
         cursor: 'pointer'
     },
+    deleteIcon: {
+        verticalAlign: 'middle'
+    },
     patternTableWrapper: {
-        overflowX: 'auto',
-        overflowY: 'hidden'
+        width: '100%',
+        position: 'relative'
     },
     patternTable: {
+        overflowX: 'auto',
+        overflowY: 'hidden',
+    },
+    patternTableInner: {
         minWidth: 600
     }
 });
@@ -52,12 +59,18 @@ let nameFieldstyles = {
         width: 30,
         marginRight: 10,
         cursor: 'pointer'
+    },
+    wrapper: {
+        minWidth: 250
     }
 };
 
 type NameFieldProps = {
     value: PatternEntry,
-    classes: { colorSample: string },
+    classes: {
+        colorSample: string,
+        wrapper: string
+    },
     colorOnClick: (e: React.MouseEvent<HTMLDivElement>) => void,
     onChange: (f: string, v: string) => void
 };
@@ -65,7 +78,7 @@ type NameFieldProps = {
 function NameField(props: NameFieldProps) {
     let color = props.value.color.background;
     return (
-        <div style={{minWidth: 250}}>
+        <div className={props.classes.wrapper}>
             <div
                 className={props.classes.colorSample}
                 style={{backgroundColor: (color ? color : defaultChartColor)}}
@@ -84,12 +97,14 @@ const patternHead: {label: string, elem: any}[] = [
 
 type PatternTableProps = {
     classes: {
+        deleteButtonRow: string,
         deleteButton: string,
         deleteButtonHide: string,
         deleteButtonShow: string,
         deleteIcon: string,
         patternTableWrapper: string,
         patternTable: string,
+        patternTableInner: string,
     },
     calendars: { [id: string]: GCalendarMeta },
     patterns: PatternEntry[],
@@ -132,13 +147,15 @@ class PatternTable extends React.Component<PatternTableProps> {
         let rows = patterns.slice(page * rowsPerPage, (page + 1) * rowsPerPage).map((p, i) => {
             let setActive = () => this.setState({ activePattern: p.idx });
             let unsetActive = () => this.setState({ activePattern: null });
+            let deleteButtonClass = this.state.activePattern !== p.idx ?
+                classes.deleteButtonHide : classes.deleteButtonShow;
             return [<TableRow key={i * 2}
                 onMouseOver={setActive} onMouseOut={unsetActive}
-                className={classes.deleteButton}>
+                className={classes.deleteButtonRow}>
                 <td>
-                    <div className={classNames(this.state.activePattern !== p.idx ? classes.deleteButtonHide : classes.deleteButtonShow, classes.deleteIcon)}>
+                    <div className={classNames(deleteButtonClass, classes.deleteButton)}>
                     <DeleteOutlinedIcon
-                        style={{verticalAlign: 'middle'}}
+                        className={classes.deleteIcon}
                         onClick={() => this.props.onRemovePattern(p.idx)} />
                     </div>
                 </td>
@@ -169,7 +186,7 @@ class PatternTable extends React.Component<PatternTableProps> {
         rows.flat();
 
         return (
-            <div style={{width: '100%', position: 'relative'}}>
+            <div className={classes.patternTableWrapper}>
                 <Popover
                     id="colorPicker"
                     open={this.state.colorPickerOpen}
@@ -196,8 +213,8 @@ class PatternTable extends React.Component<PatternTableProps> {
                         resetLabel='Reset'
                     />
                 </Popover>
-                <div className={classes.patternTableWrapper}>
-                    <Table className={classes.patternTable}>
+                <div className={classes.patternTable}>
+                    <Table className={classes.patternTableInner}>
                         <TableHead>
                             <TableRow>{patternHead.map((s, i) => (<TableCell key={i}>{s.label}</TableCell>))}</TableRow>
                         </TableHead>
@@ -211,17 +228,17 @@ class PatternTable extends React.Component<PatternTableProps> {
                             }
                         </TableBody>
                     </Table>
-                <TablePagination
-                    rowsPerPageOptions={[5, 10, 25]}
-                    component="div"
-                    count={patterns.length}
-                    rowsPerPage={rowsPerPage}
-                    page={page}
-                    backIconButtonProps={{'aria-label': 'Previous Page'}}
-                    nextIconButtonProps={{'aria-label': 'Next Page'}}
-                    onChangePage={this.handleChangePage}
-                    onChangeRowsPerPage={this.handleChangeRowsPerPage} />
                 </div>
+                    <TablePagination
+                        rowsPerPageOptions={[5, 10, 25]}
+                        component="div"
+                        count={patterns.length}
+                        rowsPerPage={rowsPerPage}
+                        page={page}
+                        backIconButtonProps={{'aria-label': 'Previous Page'}}
+                        nextIconButtonProps={{'aria-label': 'Next Page'}}
+                        onChangePage={this.handleChangePage}
+                        onChangeRowsPerPage={this.handleChangeRowsPerPage} />
             </div>);
     }
 }