improve/refactor screen responsiveness

[Luscv]

object literals

[Luscv]

`const breakpoints = { sm: Screen.lt.sm, md: Screen.lt.md, lg: Screen.lt.lg, xl: Screen.lt.xl, };

const defaultLayout = { component_layout: 'q-ma-md', profile: '', profile_pic: 'row justify-center', profile_bio: 'text-center q-mt-xl', profile_name: '', component_render: true, show_infolist: true, info_list: 'q-mt-lg', info_layout: 'row items-center q-mt-md', socials_layout: 'q-my-xl text-center', };

const layout = computed(() => { const layoutOverrides = { sm: { profile_pic: 'row justify-between', profile_bio: 'row text-center', button_fit: false, class_button: 'q-ma-none ', }, md: { profile_bio: 'row text-center', }, lg: { component_render: true, show_infolist: true, }, xl: { component_layout: 'q-ma-xl row justify-between q-mx-xl', info_list: ' row q-col-gutter-sm', info_layout: 'row items-center col-6', }, };

for (const [breakpoint, isActive] of Object.entries(breakpoints)) { if (isActive) { return { ...defaultLayout, ...layoutOverrides[breakpoint] }; } }

return defaultLayout; }); `