Update style.css

style.css

@@ -115,4 +115,70 @@ mark.hl{background:#fff59d; padding:0 2px; border-radius:2px;}
   h1{font-size:20px;}
   .theme-btn{inset-inline-start:10px; inset-block-start:10px;}
 
+/* تحسين استجابة الجدول للجوال */
+.table-wrap {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* ضبط الجدول على الشاشات الصغيرة */
+@media (max-width: 768px) {
+  table {
+    min-width: 100%;
+    table-layout: auto;
+  }
+  th, td {
+    font-size: 14px;
+    padding: 10px 6px;
+    white-space: nowrap; /* يمنع تكسر النصوص */
+  }
+}
+
+@media (max-width: 480px) {
+  th, td {
+    font-size: 12px;
+    padding: 8px 4px;
+  }
+}
+/* منع كسر كلمة "الرمز" والأرقام داخل عمود الرمز + اتجاه رقمي واضح */
+table thead th:nth-child(1),
+table tbody td:nth-child(1){
+  white-space: nowrap;     /* لا يلتف */
+  word-break: keep-all;    /* لا يجزّئ الأرقام/الكلمات القصيرة */
+  direction: ltr;          /* عرض الأرقام بشكل سليم */
+  text-align: center;
+}
+
+/* توزيع أذكى للمساحات على الجوال */
+@media (max-width: 768px){
+  /* اجعل الجدول ثابت الأعمدة ومهيأ للّف الأفقي عند الحاجة */
+  table{ table-layout: fixed; }
+
+  /* عمود الرمز عرض ثابت صغير، والنشاط يأخذ الباقي */
+  thead th:nth-child(1), tbody td:nth-child(1){ width: 84px; }   /* تقدر تغيّرينها 72–96px */
+  thead th:nth-child(2), tbody td:nth-child(2){ width: auto; }
+
+  /* تصغير بسيط للخط والحشوات */
+  th, td{ font-size: 14px; padding: 12px 8px; }
+}
+
+/* شاشات أصغر جدًا */
+@media (max-width: 480px){
+  thead th:nth-child(1), tbody td:nth-child(1){ width: 72px; }
+  th, td{ font-size: 13px; padding: 10px 6px; }
+}
+
+/* لفّ النص الطويل في عمود النشاط فقط (واترك الرمز بدون لف) */
+table thead th:nth-child(2),
+table tbody td:nth-child(2){
+  white-space: normal;
+  word-break: break-word;
+}
+
+/* تمرير أفقي سلس عند الضيق – يحافظ على نفس التصميم */
+.table-wrap{
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}