From 485049605af94c642be19f5a587c98513c1d1e24 Mon Sep 17 00:00:00 2001
From: tri10 <shubhi.blog@gmail.com>
Date: Thu, 2 Dec 2021 10:57:57 +0530
Subject: [PATCH 1/2] fix(BB-604): make dob and link button responsive

---
 src/client/entity-editor/button-bar/button-bar.js | 1 +
 src/client/entity-editor/common/new-date-field.js | 7 ++++++-
 src/client/stylesheets/style.less                 | 5 +++++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/client/entity-editor/button-bar/button-bar.js b/src/client/entity-editor/button-bar/button-bar.js
index 079d06e53f..f3140edaa1 100644
--- a/src/client/entity-editor/button-bar/button-bar.js
+++ b/src/client/entity-editor/button-bar/button-bar.js
@@ -68,6 +68,7 @@ function ButtonBar({
 				</Col>
 				<Col className="text-center" md={6}>
 					<IdentifierButton
+						className="btn wrap"
 						identifiersInvalid={identifiersInvalid}
 						numIdentifiers={numIdentifiers}
 						onClick={onIdentifierButtonClick}
diff --git a/src/client/entity-editor/common/new-date-field.js b/src/client/entity-editor/common/new-date-field.js
index 0bd66e527e..17ff0010c3 100644
--- a/src/client/entity-editor/common/new-date-field.js
+++ b/src/client/entity-editor/common/new-date-field.js
@@ -140,10 +140,11 @@ class DateField extends React.Component {
 					groupClassName={groupClassName}
 					label={labelElement}
 				>
-					<InputGroup style={{width: '18em'}}>
+					<InputGroup className="res-dob">
 						<FormControl
 							maxLength={isCommonEraDate ? 4 : 5}
 							placeholder="YYYY"
+							style={{width: '4em'}}
 							type="text"
 							value={this.state.year}
 							onBlur={this.handleYearInputBlur}
@@ -182,6 +183,10 @@ class DateField extends React.Component {
 								dateFormat="uuuuuu-MM-dd"
 								disabled={!isCommonEraDate}
 								dropdownMode="select"
+								popperModifiers={
+									{preventOverflow: {
+									  enabled: true
+									}}}
 								popperPlacement="top-end"
 								selected={isValid(selectedDate) ? selectedDate : null}
 								timeFormat="false"
diff --git a/src/client/stylesheets/style.less b/src/client/stylesheets/style.less
index 6bb1d778a1..3a0a670698 100644
--- a/src/client/stylesheets/style.less
+++ b/src/client/stylesheets/style.less
@@ -339,6 +339,11 @@ a.contact-text:visited {
 
 /* react-datepicker styling */
 .form-group {
+	.res-dob{
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+	}
 	.react-datepicker-wrapper, .react-datepicker__input-container {
 		width: 100%;
 	}

From 9becb5b04326267af02e4a174d1b7275da3ed01f Mon Sep 17 00:00:00 2001
From: tri10 <shubhi.blog@gmail.com>
Date: Wed, 22 Dec 2021 10:15:49 +0530
Subject: [PATCH 2/2] improve code readability

---
 src/client/entity-editor/common/new-date-field.js | 8 ++++----
 src/client/stylesheets/style.less                 | 8 +++++++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/client/entity-editor/common/new-date-field.js b/src/client/entity-editor/common/new-date-field.js
index 17ff0010c3..596c19e54f 100644
--- a/src/client/entity-editor/common/new-date-field.js
+++ b/src/client/entity-editor/common/new-date-field.js
@@ -140,11 +140,11 @@ class DateField extends React.Component {
 					groupClassName={groupClassName}
 					label={labelElement}
 				>
-					<InputGroup className="res-dob">
+					<InputGroup className="responsive-date-field">
 						<FormControl
+							className="year-field"
 							maxLength={isCommonEraDate ? 4 : 5}
 							placeholder="YYYY"
-							style={{width: '4em'}}
 							type="text"
 							value={this.state.year}
 							onBlur={this.handleYearInputBlur}
@@ -152,9 +152,9 @@ class DateField extends React.Component {
 						/>
 						<InputGroup.Addon style={{padding: '0 0.5em'}}>-</InputGroup.Addon>
 						<FormControl
+							className="other-date-field"
 							maxLength="2"
 							placeholder="MM"
-							style={{width: '3.5em'}}
 							type="text"
 							value={this.state.month}
 							onBlur={this.handleMonthInputBlur}
@@ -162,9 +162,9 @@ class DateField extends React.Component {
 						/>
 						<InputGroup.Addon style={{padding: '0 0.5em'}}>-</InputGroup.Addon>
 						<FormControl
+							className="other-date-field"
 							maxLength="2"
 							placeholder="DD"
-							style={{width: '3.5em'}}
 							type="text"
 							value={this.state.day}
 							onBlur={this.handleDayInputBlur}
diff --git a/src/client/stylesheets/style.less b/src/client/stylesheets/style.less
index 3a0a670698..dad2596826 100644
--- a/src/client/stylesheets/style.less
+++ b/src/client/stylesheets/style.less
@@ -339,10 +339,16 @@ a.contact-text:visited {
 
 /* react-datepicker styling */
 .form-group {
-	.res-dob{
+	.responsive-date-field{
 		width: 100%;
 		display: flex;
 		flex-wrap: wrap;
+		.year-field{
+			width:4em;
+		}
+		.other-date-field{
+			width: 3.5em;
+		}
 	}
 	.react-datepicker-wrapper, .react-datepicker__input-container {
 		width: 100%;