feat(core): add responsive styles to registration page (#5044)

The responsive style of the login and registration page has been adjusted, with special treatment given to the input.
work for #4843

packages/frontend/component/src/components/affine-banner/index.css.ts

@@ -40,6 +40,11 @@ export const tipsContainer = style({
   position: 'sticky',
   gap: '16px',
   containerType: 'inline-size',
+  '@media': {
+    'screen and (max-width: 520px)': {
+      flexWrap: 'wrap',
+    },
+  },
 });
 
 export const tipsMessage = style({
@@ -54,4 +59,9 @@ export const tipsRightItem = style({
   justifyContent: 'space-between',
   alignItems: 'center',
   gap: '16px',
+  '@media': {
+    'screen and (max-width: 520px)': {
+      width: '100%',
+    },
+  },
 });