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

Refs: #7487

Author: anicyne

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

@@ -25,8 +25,6 @@
 
 				#{$root}__content {
 					height: 100%;
-					max-width: rem(400);
-					box-sizing: border-box;
 				}
 			}
 
@@ -38,8 +36,6 @@
 
 				#{$root}__content {
 					height: 100%;
-					max-width: rem(400);
-					box-sizing: border-box;
 				}
 			}
 
@@ -51,8 +47,6 @@
 
 				#{$root}__content {
 					width: 100%;
-					max-height: rem(400);
-					box-sizing: border-box;
 				}
 			}
 
@@ -64,8 +58,6 @@
 
 				#{$root}__content {
 					width: 100%;
-					max-height: rem(400);
-					box-sizing: border-box;
 				}
 			}
 		}

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

@@ -30,11 +30,13 @@ export const DrawerBasic: FC = () => {
 			<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />
 			<div className="flex flex-wrap gap-4">
 				<KolDrawer ref={drawerElement} _label="I am a drawer" _align={align} _on={{ onClose: () => console.log('Drawer onClose triggered!') }}>
-					<p>
-						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 className={align === 'left' || align == 'right' ? 'drawer-content-vertical' : ''}>
+						<p>
+							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>
 				</KolDrawer>
 				<KolButton _label="Open drawer" _on={{ onClick: () => drawerElement.current?.open() }} />
 			</div>

packages/samples/react/src/style.scss

@@ -48,6 +48,10 @@ hr {
 	width: 500px;
 }
 
+.drawer-content-vertical {
+	width: rem(400);
+}
+
 @media (min-width: 1024px) {
 	.app-container {
 		display: grid;
@@ -84,4 +88,4 @@ hr {
 	.no-print * {
 		display: none !important;
 	}
-}
+}