Skip to content

Commit 96b11e8

Browse files
Mudita-SinghMudita-Singh
committed
Fix UI/layout inconsistencies for project cards and modal rendering
1 parent c5dea06 commit 96b11e8

2 files changed

Lines changed: 263 additions & 40 deletions

File tree

‎web-app/css/styles.css‎

Lines changed: 252 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3045,6 +3045,120 @@ body {
30453045
}
30463046
}
30473047

3048+
/* ==========================================================================
3049+
CARD AND MODAL LAYOUT STANDARDIZATION
3050+
========================================================================== */
3051+
3052+
.projects-grid {
3053+
display: grid;
3054+
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
3055+
gap: 1.2rem;
3056+
margin-top: 2rem;
3057+
align-items: stretch;
3058+
}
3059+
3060+
.project-card {
3061+
min-height: 240px;
3062+
display: flex;
3063+
flex-direction: column;
3064+
justify-content: space-between;
3065+
align-items: stretch;
3066+
padding: 1.75rem 1.5rem 1.5rem;
3067+
border-radius: 28px;
3068+
background: var(--surface-color);
3069+
border: 1px solid var(--accent-border);
3070+
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
3071+
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
3072+
}
3073+
3074+
.project-card h3 {
3075+
margin-bottom: 0.8rem;
3076+
font-size: 1.15rem;
3077+
line-height: 1.35;
3078+
color: var(--text-color);
3079+
}
3080+
3081+
.project-card p {
3082+
margin-bottom: 1rem;
3083+
color: var(--text-secondary);
3084+
font-size: 0.95rem;
3085+
line-height: 1.65;
3086+
flex: 1 1 auto;
3087+
}
3088+
3089+
.project-card .btn-play {
3090+
margin-top: auto;
3091+
align-self: flex-start;
3092+
}
3093+
3094+
.card-icon {
3095+
width: 72px;
3096+
height: 72px;
3097+
display: grid;
3098+
place-items: center;
3099+
border-radius: 22px;
3100+
background: var(--accent-soft);
3101+
color: var(--accent-color);
3102+
margin-bottom: 1.2rem;
3103+
font-size: 2rem;
3104+
flex-shrink: 0;
3105+
}
3106+
3107+
.modal-content {
3108+
width: min(100%, 900px);
3109+
max-width: 900px;
3110+
min-width: 320px;
3111+
max-height: 92vh;
3112+
overflow-y: auto;
3113+
overflow-x: hidden;
3114+
padding: 2rem;
3115+
border-radius: 20px;
3116+
box-shadow: var(--shadow-modal);
3117+
background: var(--surface-color);
3118+
border: 1px solid var(--border-color);
3119+
}
3120+
3121+
#modalBody {
3122+
width: 100%;
3123+
display: flex;
3124+
flex-direction: column;
3125+
gap: 1rem;
3126+
align-items: stretch;
3127+
}
3128+
3129+
#modalBody > * {
3130+
width: 100%;
3131+
max-width: 100%;
3132+
}
3133+
3134+
.modal-close {
3135+
z-index: 2100;
3136+
}
3137+
3138+
@media (max-width: 768px) {
3139+
.modal-content {
3140+
width: min(100%, 92vw);
3141+
padding: 1.5rem;
3142+
max-height: 90vh;
3143+
}
3144+
3145+
.project-card {
3146+
min-height: auto;
3147+
padding: 1.5rem 1.25rem;
3148+
}
3149+
}
3150+
3151+
@media (max-width: 576px) {
3152+
.projects-grid {
3153+
grid-template-columns: 1fr;
3154+
gap: 1rem;
3155+
}
3156+
3157+
.project-card {
3158+
padding: 1.25rem;
3159+
}
3160+
}
3161+
30483162
/* ==========================================================================
30493163
ARCADE REDESIGN OVERRIDES
30503164
========================================================================== */
@@ -4389,4 +4503,141 @@ body {
43894503
padding: 1rem;
43904504
}
43914505
}
4392-
}
4506+
4507+
/* ==========================================================================
4508+
FINAL CARD + MODAL CONSISTENCY OVERRIDES
4509+
This section is intentionally appended at the end to override earlier
4510+
duplicate card/modal definitions and enforce consistent spacing, sizing,
4511+
and responsive behavior across all project pages.
4512+
========================================================================== */
4513+
4514+
.projects-grid {
4515+
display: grid !important;
4516+
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
4517+
gap: 1.2rem !important;
4518+
margin-top: 2rem !important;
4519+
align-items: stretch !important;
4520+
}
4521+
4522+
.project-card {
4523+
min-height: 240px !important;
4524+
display: flex !important;
4525+
flex-direction: column !important;
4526+
justify-content: space-between !important;
4527+
align-items: stretch !important;
4528+
padding: 1.75rem 1.5rem 1.5rem !important;
4529+
border-radius: 28px !important;
4530+
background: var(--surface-color) !important;
4531+
border: 1px solid var(--accent-border) !important;
4532+
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08) !important;
4533+
transition: transform 0.2s ease !important;
4534+
}
4535+
4536+
.project-card h3 {
4537+
margin-bottom: 0.75rem !important;
4538+
font-size: 1.15rem !important;
4539+
line-height: 1.35 !important;
4540+
color: var(--text-color) !important;
4541+
}
4542+
4543+
.project-card p {
4544+
margin-bottom: 1rem !important;
4545+
color: var(--text-secondary) !important;
4546+
font-size: 0.95rem !important;
4547+
line-height: 1.6 !important;
4548+
flex: 1 1 auto !important;
4549+
}
4550+
4551+
.project-card .btn-play {
4552+
margin-top: auto !important;
4553+
align-self: flex-start !important;
4554+
}
4555+
4556+
.card-icon {
4557+
width: 72px !important;
4558+
height: 72px !important;
4559+
display: grid !important;
4560+
place-items: center !important;
4561+
border-radius: 22px !important;
4562+
background: var(--accent-soft) !important;
4563+
color: var(--accent-color) !important;
4564+
margin-bottom: 1.2rem !important;
4565+
font-size: 2rem !important;
4566+
}
4567+
4568+
.modal {
4569+
display: none !important;
4570+
position: fixed !important;
4571+
top: 0 !important;
4572+
left: 0 !important;
4573+
width: 100% !important;
4574+
height: 100% !important;
4575+
background: var(--overlay-color) !important;
4576+
backdrop-filter: blur(6px) !important;
4577+
-webkit-backdrop-filter: blur(6px) !important;
4578+
z-index: 2000 !important;
4579+
animation: fadeIn 0.3s ease !important;
4580+
}
4581+
4582+
.modal.active {
4583+
display: flex !important;
4584+
align-items: center !important;
4585+
justify-content: center !important;
4586+
}
4587+
4588+
.modal-content {
4589+
width: min(100%, 900px) !important;
4590+
max-width: 900px !important;
4591+
min-width: 320px !important;
4592+
max-height: 92vh !important;
4593+
overflow-y: auto !important;
4594+
overflow-x: hidden !important;
4595+
padding: 2rem !important;
4596+
border-radius: 20px !important;
4597+
box-shadow: var(--shadow-modal) !important;
4598+
background: var(--surface-color) !important;
4599+
border: 1px solid var(--border-color) !important;
4600+
margin: auto !important;
4601+
}
4602+
4603+
#modalBody {
4604+
width: 100% !important;
4605+
display: flex !important;
4606+
flex-direction: column !important;
4607+
gap: 1rem !important;
4608+
align-items: stretch !important;
4609+
}
4610+
4611+
#modalBody > * {
4612+
width: 100% !important;
4613+
max-width: 100% !important;
4614+
}
4615+
4616+
.modal-close {
4617+
z-index: 2100 !important;
4618+
}
4619+
4620+
@media (max-width: 768px) {
4621+
.modal-content {
4622+
width: min(100%, 92vw) !important;
4623+
padding: 1.5rem !important;
4624+
max-height: 90vh !important;
4625+
}
4626+
4627+
.project-card {
4628+
min-height: auto !important;
4629+
padding: 1.5rem 1.25rem !important;
4630+
}
4631+
}
4632+
4633+
@media (max-width: 576px) {
4634+
.projects-grid {
4635+
grid-template-columns: 1fr !important;
4636+
gap: 1rem !important;
4637+
}
4638+
4639+
.project-card {
4640+
padding: 1.25rem !important;
4641+
min-height: auto !important;
4642+
}
4643+
}

‎web-app/js/main.js‎

Lines changed: 11 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -799,18 +799,19 @@ if (stickyFilterBar && heroSection) {
799799
var modalBody = document.getElementById('modalBody');
800800
if (!modalContent || !modalBody) return;
801801

802-
// Reset scroll position to top to avoid viewport clippings during calculations
803802
modalContent.scrollTop = 0;
804803
modalBody.scrollTop = 0;
805804

806-
// Hide scrollbars on the container
807-
modalContent.style.overflow = 'hidden';
805+
modalContent.style.overflow = 'auto';
808806

809-
// Reset inline styles to capture natural dimensions
810807
modalBody.style.transform = '';
811808
modalBody.style.transformOrigin = '';
812-
modalBody.style.width = '';
809+
modalBody.style.width = '100%';
813810
modalBody.style.height = '';
811+
modalBody.style.display = 'flex';
812+
modalBody.style.flexDirection = 'column';
813+
modalBody.style.alignItems = 'stretch';
814+
modalBody.style.gap = '1rem';
814815

815816
var targetEl = Array.from(modalBody.children).find(function (el) {
816817
return el.tagName.toLowerCase() !== 'style';
@@ -819,40 +820,8 @@ if (stickyFilterBar && heroSection) {
819820

820821
targetEl.style.transform = '';
821822
targetEl.style.transformOrigin = '';
822-
823-
var computedStyle = window.getComputedStyle(modalContent);
824-
var paddingTop = parseFloat(computedStyle.paddingTop) || 32;
825-
var paddingBottom = parseFloat(computedStyle.paddingBottom) || 32;
826-
var paddingLeft = parseFloat(computedStyle.paddingLeft) || 32;
827-
var paddingRight = parseFloat(computedStyle.paddingRight) || 32;
828-
829-
var availableHeight = modalContent.clientHeight - paddingTop - paddingBottom;
830-
var availableWidth = modalContent.clientWidth - paddingLeft - paddingRight;
831-
832-
var contentHeight = targetEl.scrollHeight;
833-
var contentWidth = targetEl.scrollWidth;
834-
835-
if (contentHeight <= 0 || contentWidth <= 0) return;
836-
837-
var zoom = 1;
838-
var heightZoom = availableHeight / contentHeight;
839-
var widthZoom = availableWidth / contentWidth;
840-
841-
zoom = Math.min(heightZoom, widthZoom);
842-
if (zoom > 1) {
843-
zoom = 1;
844-
}
845-
846-
// Apply scale transform and origins
847-
targetEl.style.transform = 'scale(' + zoom + ')';
848-
targetEl.style.transformOrigin = 'top center';
849-
850-
// Constrain wrapper block size to prevent scroll triggering
851-
modalBody.style.height = (contentHeight * zoom) + 'px';
852-
modalBody.style.width = '100%';
853-
modalBody.style.display = 'flex';
854-
modalBody.style.flexDirection = 'column';
855-
modalBody.style.alignItems = 'center';
823+
targetEl.style.width = '100%';
824+
targetEl.style.maxWidth = '100%';
856825
}
857826

858827
function initModalScaling() {
@@ -974,6 +943,9 @@ if (stickyFilterBar && heroSection) {
974943
modalBody.style.transformOrigin = '';
975944
modalBody.style.width = '';
976945
modalBody.style.height = '';
946+
modalBody.style.display = '';
947+
modalBody.style.alignItems = '';
948+
modalBody.style.gap = '';
977949
}
978950
if (lastFocusedElement && typeof lastFocusedElement.focus === 'function') {
979951
lastFocusedElement.focus({ preventScroll: true });

0 commit comments

Comments
 (0)