feat: unify project responsive layouts

pages/genealogy/g09-my-applications.vue

@@ -218,6 +218,8 @@ const toSearch = () =>
 </script>
 
 <style scoped lang="scss">
+@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+
 .application-page {
   display: flex;
   min-height: 100vh;
@@ -248,20 +250,19 @@ const toSearch = () =>
   font-size: 24rpx;
 }
 .application-card {
+  @include adaptive.adaptive-genealogy-list-card;
   display: grid;
   width: 100%;
-  min-height: 228rpx;
-  margin-bottom: 18rpx;
-  background: url("/static/assets/modules/genealogy/transparent/list-slip-frame.png")
-    center / 100% 100% no-repeat;
+  min-height: 210rpx;
+  margin-bottom: 12rpx;
 }
 .application-card__body {
   display: grid;
   min-width: 0;
-  min-height: 228rpx;
+  min-height: 174rpx;
   grid-template-columns: minmax(0, 1fr) auto;
-  gap: 12rpx 18rpx;
-  padding: 42rpx 52rpx 34rpx 64rpx;
+  gap: 8rpx 14rpx;
+  padding: 26rpx 28rpx 22rpx 40rpx;
   box-sizing: border-box;
 }
 .application-card__name {
@@ -332,8 +333,10 @@ const toSearch = () =>
   color: $brand-red;
   font-size: 23rpx;
   font-weight: 700;
+  white-space: nowrap;
 }
 .application-state-card {
+  @include adaptive.adaptive-genealogy-list-card;
   display: flex;
   width: 100%;
   min-height: 228rpx;
@@ -342,8 +345,6 @@ const toSearch = () =>
   margin-top: 80rpx;
   padding: 48rpx 12%;
   box-sizing: border-box;
-  background: url("/static/assets/modules/genealogy/transparent/list-slip-frame.png")
-    center / 100% 100% no-repeat;
 }
 .application-state-card__copy {
   display: flex;