update

src/App.vue

@@ -36,7 +36,7 @@ const isGuest = ref(false);
 /** @var {String} */
 const password = ref('');
 /** @var {Boolean} */
-const isSiderCollapsed = ref(false);
+const isSiderCollapsed = ref(true);
 // on mounted
 onMounted(mounted);
 

src/components/ServiceConfigurationActions.vue

@@ -1,15 +1,14 @@
 <template>
-  <div class="flex flex-row flex-wrap">
-    <div class="p-1" style="min-width:30%;" v-for="(group, groupIndex) in actions" :key="groupIndex">
+  <div class="flex flex-row  flex-wrap">
+    <div class="p-1" style="min-width:100%;" v-for="(group, groupIndex) in actions" :key="groupIndex">
       <fieldset class="border my-1 p-1 h-full">
         <legend>{{ group.name }}</legend>
         <table class="w-full">
           <tr v-for="action in group.items" :key="action.key" style="white-space: pre;">
             <td>
-              <a-button class="m-1 w-full text-left" :loading="action.isExecuting"
+              <a-button class="m-1 fixed-length-button text-left" :loading="action.isExecuting"
                 @click="actionServiceExecute(action)">{{ action.name }}</a-button>
-            </td>
-            <td>
+
               <div class="inline-block ml-2 relative" v-for="actionParam in action.params" :key="actionParam.key">
                 <div class="action-param-label">{{ actionParam.name }}</div>
                 <a-select v-if="'java.lang.Boolean' === actionParam.type" v-model:value="actionParam.value"
@@ -28,8 +27,8 @@
                   <a-select-option v-for="(enumItem, enumIndex) in actionParam.options" :key="enumIndex"
                     :value="enumItem.value">{{ enumItem.name }}</a-select-option>
                 </a-select>
-                <service-configuration-action-param-file v-else-if="'a8k.extui.type.param.ExtUIFile' === actionParam.type"
-                  v-model:value="actionParam.value" />
+                <service-configuration-action-param-file
+                  v-else-if="'a8k.extui.type.param.ExtUIFile' === actionParam.type" v-model:value="actionParam.value" />
                 <span v-else>{{ actionParam }}</span>
               </div>
             </td>
@@ -141,4 +140,16 @@ async function actionServiceExecute(action) {
   padding: 0 5px;
   color: #7b7b7b;
 }
+
+.action-button {
+  white-space: normal;
+  word-break: break-word;
+}
+
+.fixed-length-button {
+  width: 230px;
+  /* Set a fixed width for the buttons */
+  white-space: normal;
+  word-break: break-word;
+}
 </style>