feat: UI-Komponente responsiver gestaltet und angepasst OPCUA-Komponente

- Containergröße reduziert (`max-w-lg` statt `max-w-3xl`), um besser auf die Seite zu passen.
- Padding (`p-4` → `p-2`) und Schriftgrößen (`text-lg` → `text-base`, `text-sm` für Labels) optimiert.
- Buttons kompakter gemacht (`px-3 py-1` statt `px-4 py-2`), um Platz zu sparen.
- Flex-Layout verbessert (`flex-wrap`, `gap-2`), um die Darstellung auf kleineren Bildschirmen zu optimieren.

components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx

@@ -34,15 +34,17 @@ export default function OPCUAInterfaceSettings() {
   };
 
   return (
-    <div className="max-w-3xl mx-auto p-4 bg-gray-100 shadow-md rounded-lg">
-      <h2 className="text-lg font-semibold mb-4">OPCUA Server Einstellungen</h2>
+    <div className="max-w-lg mx-auto p-2 bg-gray-100 shadow-md rounded-lg">
+      <h2 className="text-base font-semibold mb-3">
+        OPCUA Server Einstellungen
+      </h2>
 
       {/* ✅ Server Aktivierung */}
-      <div className="mb-4 flex items-center">
-        <label className="mr-4 font-medium">Server Status:</label>
+      <div className="mb-3 flex flex-wrap items-center">
+        <label className="mr-3 font-medium text-sm">Server Status:</label>
         <button
           onClick={() => dispatch(toggleOpcUaServer())}
-          className={`px-4 py-2 rounded ${
+          className={`px-3 py-1 rounded text-sm ${
             opcuaSettings.isEnabled ? "bg-green-500" : "bg-gray-300"
           } text-white`}
         >
@@ -51,12 +53,14 @@ export default function OPCUAInterfaceSettings() {
       </div>
 
       {/* ✅ Verschlüsselung */}
-      <div className="mb-4">
-        <label className="block font-medium mb-1">Verschlüsselung</label>
+      <div className="mb-3">
+        <label className="block font-medium text-sm mb-1">
+          Verschlüsselung
+        </label>
         <select
           value={opcuaSettings.encryption}
           onChange={(e) => dispatch(setOpcUaEncryption(e.target.value))}
-          className="w-full p-2 border border-gray-300 rounded-md"
+          className="w-full p-1 border border-gray-300 rounded-md text-sm"
         >
           <option value="None">Keine</option>
           <option value="Basic256">Basic256</option>
@@ -64,35 +68,27 @@ export default function OPCUAInterfaceSettings() {
         </select>
       </div>
 
-      {/* ✅ OPCUA Zustand (nur Anzeige) */}
-      <div className="mb-4">
-        <label className="block font-medium mb-1">OPCUA Zustand</label>
-        <div className="p-2 border border-gray-300 rounded-md bg-white">
+      {/* ✅ OPCUA Zustand */}
+      <div className="mb-3">
+        <label className="block font-medium text-sm mb-1">OPCUA Zustand</label>
+        <div className="p-1 border border-gray-300 rounded-md bg-white text-sm">
           {opcuaSettings.opcUaZustand}
         </div>
       </div>
 
-      {/* ✅ Aktive Clients (nur Anzeige) */}
-      <div className="mb-4">
-        <label className="block font-medium mb-1">Aktive Clients</label>
-        <div className="p-2 border border-gray-300 rounded-md bg-white">
-          {opcuaSettings.opcUaActiveClientCount}
-        </div>
-      </div>
-
       {/* ✅ Nodeset Name */}
-      <div className="mb-4">
-        <label className="block font-medium mb-1">Nodeset Name</label>
+      <div className="mb-3">
+        <label className="block font-medium text-sm mb-1">Nodeset Name</label>
         <div className="flex">
           <input
             type="text"
-            className="flex-grow p-2 border border-gray-300 rounded-l-md"
+            className="flex-grow p-1 border border-gray-300 rounded-l-md text-sm"
             value={nodesetName}
             onChange={(e) => setNodesetName(e.target.value)}
           />
           <button
             onClick={handleNodesetUpdate}
-            className="px-4 py-2 bg-blue-500 text-white rounded-r-md"
+            className="px-3 py-1 bg-blue-500 text-white rounded-r-md text-sm"
           >
             Übernehmen
           </button>
@@ -100,18 +96,15 @@ export default function OPCUAInterfaceSettings() {
       </div>
 
       {/* ✅ Benutzerverwaltung */}
-      <div className="mb-4">
-        <h3 className="text-lg font-semibold mb-2">Benutzer</h3>
-        <ul className="space-y-2">
+      <div className="mb-3">
+        <h3 className="text-base font-semibold mb-2">Benutzer</h3>
+        <ul className="space-y-1">
           {opcuaSettings.users.map((user) => (
             <li
               key={user.id}
-              className="p-2 bg-white shadow-sm rounded-md flex justify-between items-center"
+              className="p-1 bg-white shadow-sm rounded-md flex justify-between items-center text-sm"
             >
               <span className="font-medium">{user.username}</span>
-              <span className="text-gray-600 ml-2">
-                (Passwort: {user.password})
-              </span>
               <button
                 onClick={() => dispatch(removeOpcUaUser(user.id))}
                 className="text-red-500"
@@ -123,24 +116,24 @@ export default function OPCUAInterfaceSettings() {
         </ul>
 
         {/* ✅ Neuen Benutzer hinzufügen */}
-        <div className="mt-4 flex space-x-2">
+        <div className="mt-2 flex flex-wrap gap-2">
           <input
             type="text"
             placeholder="Benutzername"
             value={newUsername}
             onChange={(e) => setNewUsername(e.target.value)}
-            className="p-2 border rounded w-1/3"
+            className="p-1 border rounded flex-grow text-sm"
           />
           <input
             type="password"
             placeholder="Passwort"
             value={newPassword}
             onChange={(e) => setNewPassword(e.target.value)}
-            className="p-2 border rounded w-1/3"
+            className="p-1 border rounded flex-grow text-sm"
           />
           <button
             onClick={handleAddUser}
-            className="bg-blue-500 text-white p-2 rounded w-1/3"
+            className="bg-blue-500 text-white p-1 rounded text-sm"
           >
             Hinzufügen
           </button>