fix(ui5-popover): make sample responsive for small devices (#4527)

The sample popover had 300px width. Part of #4206
SAP · Dec 23, 2021 · fddf903 · fddf903
1 parent 7d35bd6
commit fddf903
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 8 deletions.
diff --git a/packages/main/test/samples/ResponsivePopover.sample.html b/packages/main/test/samples/ResponsivePopover.sample.html
@@ -42,12 +42,10 @@ <h3>Basic ResponsivePopover</h3>
 <ui5-button id="openBtn" design="Emphasized">Open Popover</ui5-button>
 
 <ui5-responsive-popover id="hello-popover" header-text="Newsletter subscription">
-	<div class="popover-content">
-		<div class="flex-column">
-			<ui5-label for="emailInput" required>Email: </ui5-label>
-			<ui5-input id="emailInput" class="samples-margin-top" placeholder="Enter Email"></ui5-input>
-			<ui5-label>Note: If you open the page in mobile, dialog would be displayed.</ui5-label>
-		</div>
+	<div class="flex-column">
+		<ui5-label for="emailInput" required>Email: </ui5-label>
+		<ui5-input id="emailInput" class="samples-margin-top" placeholder="Enter Email"></ui5-input>
+		<ui5-label>Note: If you open the page in mobile, dialog would be displayed.</ui5-label>
 	</div>
 	<div slot="footer" class="popover-footer">
 		<div style="flex: 1;"></div>

diff --git a/packages/playground/assets/css/api.css b/packages/playground/assets/css/api.css
@@ -111,8 +111,8 @@ body {
 }
 
 .popover-content {
-	width: 300px;
-	height: 150px;
+	margin: 0.5rem;
+	height: 100px;
 	display: flex;
 	flex-direction:column;
 	justify-content: center;