UI-1183: Updated the design of Holidays in SmartPBX's MainNumber to be more responsive

submodules/strategy/strategy.css

@@ -268,7 +268,7 @@
 }
 
 #strategy_container .element-container.strategy-holidays .holidays-div .holidays-add {
-	padding: 0px 60px;
+	padding: 0px 20px;
 	margin: 0;
 }
 
@@ -286,7 +286,7 @@
 }
 
 #strategy_container .element-container.strategy-holidays .holidays-div .holidays-element {
-	padding: 5px 40px;
+	padding: 5px 0px;
 }
 
 #strategy_container .element-container.strategy-holidays .holidays-div .holidays-element:not(:last-of-type) {
@@ -294,10 +294,12 @@
 }
 
 #strategy_container .element-container.strategy-holidays .holidays-div .holidays-element input,
-#strategy_container .element-container.strategy-holidays .holidays-div .holidays-element span,
 #strategy_container .element-container.strategy-holidays .holidays-div .holidays-element select {
 	margin: 5px 20px 5px 0px;
 }
+#strategy_container .element-container.strategy-holidays .holidays-div .holidays-element span {
+	margin: 10px 20px 0px 0px;
+}
 
 #strategy_container .element-container.strategy-holidays .holidays-div .holidays-element .month {
 	width: 70px;
@@ -317,7 +319,8 @@
 }
 
 #strategy_container .element-container.strategy-holidays .holidays-div .holidays-element .name {
-	width: 180px;
+	width: 380px;
+	min-width: 0px;
 }
 
 #strategy_container .element-container.strategy-holidays .holidays-div .holidays-element .date {
@@ -330,6 +333,14 @@
 	cursor: pointer;
 }
 
+#strategy_container .element-container.strategy-holidays .holidays-div .holidays-element .holiday-inputs {
+	display: flex;
+}
+#strategy_container .element-container.strategy-holidays .holidays-div .holidays-element .holiday-inputs select,
+#strategy_container .element-container.strategy-holidays .holidays-div .holidays-element .holiday-inputs span {
+	flex-shrink: 0;
+}
+
 /********** Strategy Calls ***********/
 
 #strategy_container .element-container.strategy-calls .calls-tabs {

views/strategy-holidayLine.html

@@ -2,7 +2,7 @@
 	<div class="delete-holiday">
 		<i class="icon-trash icon-red"></i>
 	</div>
-	<div>
+	<div class="holiday-inputs">
 		<input type="text" class="name" value="{{name}}">
 		<select class="month">
 			{{#each resources.months}}