From 86f1de9f230ef81185bb2592b606042485e7ba3c Mon Sep 17 00:00:00 2001
From: Rajakumardev <rajakumarofficial@gmail.com>
Date: Wed, 7 Oct 2020 14:19:38 +0530
Subject: [PATCH 1/2] Limit Border Size 200 (MAX) and content overflow
 visiblity hidden

---
 src/components/ConfigCover.js | 2 +-
 src/components/CoverImage.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ConfigCover.js b/src/components/ConfigCover.js
index abaea2b..66c33d0 100644
--- a/src/components/ConfigCover.js
+++ b/src/components/ConfigCover.js
@@ -118,7 +118,7 @@ class ConfigCover extends React.Component {
 						<div className="d-flex flex-row">
 							<div className="input-sm">
 								<label>Size</label>
-								<input type="number" className="form-control " value={this.state.borderSize} onChange={(e) => this.setState({ borderSize: e.target.value })} />
+								<input type="number" max="200" className="form-control " value={this.state.borderSize} onChange={(e) => this.setState({ borderSize: e.target.value })} />
 							</div>
 
 							<div className="input-sm">
diff --git a/src/components/CoverImage.css b/src/components/CoverImage.css
index ad33a45..7ea6cf8 100644
--- a/src/components/CoverImage.css
+++ b/src/components/CoverImage.css
@@ -8,7 +8,7 @@
     width:800px;
     padding:90px;
     border-radius:2px;
-    
+    overflow-y: hidden;
 
 }
 

From 931b5e2de450478ddedabb9adc99143cadbe976e Mon Sep 17 00:00:00 2001
From: Rajakumardev <rajakumarofficial@gmail.com>
Date: Wed, 7 Oct 2020 18:49:33 +0530
Subject: [PATCH 2/2] border max value changed to 50, also
 maxBorderValidationCheck() function added to prevent user to type value >than
 50

---
 src/components/ConfigCover.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/ConfigCover.js b/src/components/ConfigCover.js
index 66c33d0..2645b42 100644
--- a/src/components/ConfigCover.js
+++ b/src/components/ConfigCover.js
@@ -41,7 +41,12 @@ class ConfigCover extends React.Component {
 	getRandomTheme = (theme, Pattern) => {
 		this.setState({ bgColor: theme.bgColor, borderColor: theme.bdColor, pattern: Pattern });
 	}
-
+	//this function will set the max border value to 50 if user types a value greater than 50
+	maxBorderValidationCheck = (e) => {
+		if(e.target.value > 50) {
+			e.target.value = 50;
+		}
+	}
 	render() {
 		return (
 			<div className="main-container">
@@ -118,7 +123,7 @@ class ConfigCover extends React.Component {
 						<div className="d-flex flex-row">
 							<div className="input-sm">
 								<label>Size</label>
-								<input type="number" max="200" className="form-control " value={this.state.borderSize} onChange={(e) => this.setState({ borderSize: e.target.value })} />
+								<input type="number" max="50" onInput = {this.maxBorderValidationCheck} className="form-control " value={this.state.borderSize} onChange={(e) => this.setState({ borderSize: e.target.value })} />
 							</div>
 
 							<div className="input-sm">