Fixed datapack overflow

client/src/views/GameInterface/tabs/DatapackTab.jsx

@@ -58,90 +58,92 @@ const DatapackTab = () => {
 
   return (
     <div className="tab-content active datapack-tab-wrapper">
-      <div className="datapack-controls">
-        <div className="section-selector">
-          {sections.map((s) => (
-            <button
-              key={s.id}
-              className={`section-btn ${activeSection === s.id ? "active" : ""}`}
-              onClick={() => setActiveSection(s.id)}
-            >
-              <i className={`fas ${s.icon}`}></i>
-              <span>{s.label}</span>
-            </button>
-          ))}
+      <MeteorRegion>
+        <div className="datapack-controls">
+          <div className="section-selector">
+            {sections.map((s) => (
+              <button
+                key={s.id}
+                className={`section-btn ${activeSection === s.id ? "active" : ""}`}
+                onClick={() => setActiveSection(s.id)}
+              >
+                <i className={`fas ${s.icon}`}></i>
+                <span>{s.label}</span>
+              </button>
+            ))}
+          </div>
+
+          <div className="search-bar">
+            <i className="fas fa-search"></i>
+            <input
+              type="text"
+              placeholder="Search ID or Name..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
         </div>
 
-        <div className="search-bar">
-          <i className="fas fa-search"></i>
-          <input
-            type="text"
-            placeholder="Search ID or Name..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-          />
-        </div>
-      </div>
-
-      <MeteorRegion className="datapack-content">
-        <div className="datapack-grid">
-          {displayList.map((item) => (
-            <div
-              key={item.id}
-              className={`datapack-card ${activeSection === "hostiles" ? "hostile-card" : ""}`}
-              onClick={() =>
-                setSelectedItem({ ...item, sectionType: activeSection })
-              }
-            >
-              <div className="card-icon">
-                {item.texture ? (
-                  <img
-                    src={`${config.serverUrl}/static/${item.texture}`}
-                    alt=""
-                  />
-                ) : (
-                  <div className="fallback-icon">
-                    {item.displayName?.[0] || "?"}
-                  </div>
-                )}
-              </div>
-
-              <div className="card-info">
-                <span className="card-name">{item.displayName}</span>
-                <span className="card-id">{item.id}</span>
-
-                {/* Секція луту без картинок, лише текст або іконка коробки */}
-                {activeSection === "hostiles" &&
-                  item.loot &&
-                  item.loot.length > 0 && (
-                    <div className="card-loot-preview">
-                      {item.loot.map((lootEntry, idx) => {
-                        const lootData = GameDataManager.getItem(lootEntry.id);
-                        return (
-                          <div
-                            key={`${item.id}-loot-${idx}`}
-                            className="loot-mini-slot-text"
-                            title={`${lootData?.displayName || lootEntry.id} (${(lootEntry.chance * 100).toFixed(0)}%)`}
-                          >
-                            <i
-                              className="fas fa-box-open"
-                              style={{ fontSize: "10px", marginRight: "4px" }}
-                            ></i>
-                            <span>
-                              {lootData?.displayName ||
-                                lootEntry.id.split(":").pop()}
-                            </span>
-                          </div>
-                        );
-                      })}
+        <div className="datapack-content">
+          <div className="datapack-grid">
+            {displayList.map((item) => (
+              <div
+                key={item.id}
+                className={`datapack-card ${activeSection === "hostiles" ? "hostile-card" : ""}`}
+                onClick={() =>
+                  setSelectedItem({ ...item, sectionType: activeSection })
+                }
+              >
+                <div className="card-icon">
+                  {item.texture ? (
+                    <img
+                      src={`${config.serverUrl}/static/${item.texture}`}
+                      alt=""
+                    />
+                  ) : (
+                    <div className="fallback-icon">
+                      {item.displayName?.[0] || "?"}
                     </div>
                   )}
+                </div>
+
+                <div className="card-info">
+                  <span className="card-name">{item.displayName}</span>
+                  <span className="card-id">{item.id}</span>
+
+                  {activeSection === "hostiles" &&
+                    item.loot &&
+                    item.loot.length > 0 && (
+                      <div className="card-loot-preview">
+                        {item.loot.map((lootEntry, idx) => {
+                          const lootData = GameDataManager.getItem(
+                            lootEntry.id,
+                          );
+                          return (
+                            <div
+                              key={`${item.id}-loot-${idx}`}
+                              className="loot-mini-slot-text"
+                              title={`${lootData?.displayName || lootEntry.id} (${(lootEntry.chance * 100).toFixed(0)}%)`}
+                            >
+                              <i
+                                className="fas fa-box-open"
+                                style={{ fontSize: "10px", marginRight: "4px" }}
+                              ></i>
+                              <span>
+                                {lootData?.displayName ||
+                                  lootEntry.id.split(":").pop()}
+                              </span>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    )}
+                </div>
               </div>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
       </MeteorRegion>
-
       {selectedItem && (
         <DatapackDetailsModal
           data={selectedItem}