Refactor drawer layout: move close button to slot and set full width/height

Refs: #7487

Author: anicyne

packages/components/src/components/drawer/style.scss

@@ -19,27 +19,43 @@
 				left: 0;
 				height: 100vh;
 				max-height: 100%;
+
+				.drawer__content {
+					height: 100%;
+				}
 			}
 
 			&--right {
 				top: 0;
 				right: 0;
 				height: 100vh;
 				max-height: 100%;
+
+				.drawer__content {
+					height: 100%;
+				}
 			}
 
 			&--top {
 				left: 0;
 				top: 0;
 				width: 100vw;
 				max-width: 100%;
+
+				.drawer__content {
+					width: 100%;
+				}
 			}
 
 			&--bottom {
 				left: 0;
 				bottom: 0;
 				width: 100vw;
 				max-width: 100%;
+
+				.drawer__content {
+					width: 100%;
+				}
 			}
 		}
 

packages/samples/react/src/components/drawer/basic.tsx

@@ -39,8 +39,8 @@ export const DrawerBasic: FC = () => {
 							Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
 							voluptua.
 						</p>
+						<KolButton _label="Close drawer" _on={{ onClick: () => drawerElement.current?.close() }} />
 					</div>
-					<KolButton _label="Close drawer" _on={{ onClick: () => drawerElement.current?.close() }} />
 				</KolDrawer>
 				<KolButton _label="Open drawer" _on={{ onClick: () => drawerElement.current?.open() }} />
 				<KolDrawer
@@ -55,8 +55,8 @@ export const DrawerBasic: FC = () => {
 							Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
 							voluptua.
 						</p>
+						<KolButton _label="Close drawer modal" _on={{ onClick: () => drawerModalElement.current?.close() }} />
 					</div>
-					<KolButton _label="Close drawer modal" _on={{ onClick: () => drawerModalElement.current?.close() }} />
 				</KolDrawer>
 				<KolButton _label="Open drawer as modal" _on={{ onClick: () => drawerModalElement.current?.open() }} />
 			</div>