From ced2458d35e8a7cee452189ce6439b38da1a20c4 Mon Sep 17 00:00:00 2001
From: Kirti LNU <kilnu@homeaway.com>
Date: Thu, 17 Oct 2019 23:47:35 +0530
Subject: [PATCH 1/2] Ui changed accr to media query

---
 src/common/common.css    | 19 +++++++++++++++++++
 src/options/options.html |  2 +-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/common/common.css b/src/common/common.css
index c55b48a7..11e799b9 100644
--- a/src/common/common.css
+++ b/src/common/common.css
@@ -133,6 +133,8 @@ a:active {
   padding: 4px;
 
   border-radius: 4px;
+  display: flex;
+
 
   /* use whole width */
   width: calc(100% - 8px);
@@ -171,6 +173,21 @@ a:active {
   margin-top: 8px;
 }
 
+@media screen and (max-width: 767px) {
+  .message-box {
+    flex-wrap: wrap;
+  }
+  .message-text {
+    display: inline-block;
+  }
+
+  .message-link {
+    flex-basis: 100%;
+    margin: 8px 0 auto 18px;
+
+  }
+}
+
 .error {
   color: var(--white-100);
   background-color: var(--red-60);
@@ -223,6 +240,8 @@ a:active {
   margin: 4px;
 }
 
+
+
 .error::before {
   background-image: url('/common/img/error-white.svg');
 }
diff --git a/src/options/options.html b/src/options/options.html
index 1649ae24..c7727abf 100644
--- a/src/options/options.html
+++ b/src/options/options.html
@@ -52,7 +52,7 @@
 			</div>
 			<div id="messageContrast" aria-label="info message" data-i18n data-i18n-aria-label="__MSG_ariaMessageInfo__" class="message-box info invisible fade-hide">
 				<span class="message-text"></span>
-				<a href="#">
+				<a class="message-link" href="#">
 					<button type="button" class="message-action-button micro-button info invisible"></button>
 				</a>
 				<img class="icon-dismiss invisible" src="/common/img/close.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>

From 75d65fb989449c0335e6e4f4d5617144f242f7f6 Mon Sep 17 00:00:00 2001
From: Kirti LNU <kilnu@homeaway.com>
Date: Fri, 15 Nov 2019 19:09:04 +0530
Subject: [PATCH 2/2] review-coment-incorporated

---
 src/common/common.css    | 3 +--
 src/options/options.html | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/common/common.css b/src/common/common.css
index 11e799b9..5e841ddc 100644
--- a/src/common/common.css
+++ b/src/common/common.css
@@ -181,10 +181,9 @@ a:active {
     display: inline-block;
   }
 
-  .message-link {
+  .message-box > a{
     flex-basis: 100%;
     margin: 8px 0 auto 18px;
-
   }
 }
 
diff --git a/src/options/options.html b/src/options/options.html
index a98eeba3..3169dce3 100644
--- a/src/options/options.html
+++ b/src/options/options.html
@@ -134,7 +134,7 @@ <h2 data-i18n="__MSG_subtitleMisc__">Miscellaneous settings</h2>
 					<li class="message-container">
 						<div id="messageContrast" aria-label="info message" data-i18n data-i18n-aria-label="__MSG_ariaMessageInfo__" class="message-box info invisible fade-hide">
 							<span class="message-text"></span>
-							<a href="#" class="message-link">
+							<a href="#">
 								<button type="button" class="message-action-button micro-button info invisible"></button>
 							</a>
 							<img class="icon-dismiss invisible" src="/common/img/close.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>