From e425d71fa7bacea6e46dfde39e21223e25b0d7ba Mon Sep 17 00:00:00 2001
From: hoang <pham.ngoc.hoang@linecorp.com>
Date: Thu, 1 Oct 2026 09:17:16 +0700
Subject: [PATCH 1/2] Fix UI quirks in the Exporters table on Project Detail
 page

The Exporters table on the Project Detail page was broken when it contained Exporters with
very long job names or exporter paths. We have resolved this issue by applying the CSS style
"word-break: break-all" to the table tag.
---
 promgen/templates/promgen/project_detail_exporters.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/promgen/templates/promgen/project_detail_exporters.html b/promgen/templates/promgen/project_detail_exporters.html
index 8fe01c1e3..b295bdff9 100644
--- a/promgen/templates/promgen/project_detail_exporters.html
+++ b/promgen/templates/promgen/project_detail_exporters.html
@@ -7,7 +7,7 @@
 {% endif %}
 
 <div class="panel panel-default">
-  <table class="table table-bordered table-condensed">
+  <table class="table table-bordered table-condensed" style="word-break: break-all">
     <tr>
       <th>Job</th>
       <th>Port</th>

From f1e4be854d10b9be0a647358371807ba359b4a49 Mon Sep 17 00:00:00 2001
From: hoang <pham.ngoc.hoang@linecorp.com>
Date: Thu, 1 Oct 2026 09:23:01 +0700
Subject: [PATCH 2/2] Fix UI quirks when displaying list of Exporters inside
 Projects table

When displaying the Projects table for a Service, we include a list of Exporters for each
Project. However, if the Exporters have very long job names or exporter paths, it can disrupt
the layout of the entire Projects table. Since the display area is limited, we resolved this by
hiding overflow content using the CSS style "text-overflow: ellipsis" on the relevant HTML tag.
---
 promgen/templates/promgen/project_row.html | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/promgen/templates/promgen/project_row.html b/promgen/templates/promgen/project_row.html
index ac4d2f6b7..fe2ec54f3 100644
--- a/promgen/templates/promgen/project_row.html
+++ b/promgen/templates/promgen/project_row.html
@@ -3,12 +3,24 @@
     <td><a href="{{project.get_absolute_url}}" v-pre>{{ project.name }}</a></td>
 
     <td>
-        <table style="width: 100%">
+        <table class="p-0" style="width: 100%; table-layout: fixed; padding: 0;">
             {% for exporter in project.exporter_set.all %}
             <tr {% if not exporter.enabled %}class="promgen-disabled" {% endif %}>
-                <td v-pre>{{ exporter.job }}</td>
-                <td v-pre>{{ exporter.port }}</td>
-                <td v-pre>{{ exporter.path_value }}</td>
+                <td
+                    class="col-xs-4"
+                    style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 0px;"
+                    v-pre
+                >
+                    {{ exporter.job }}
+                </td>
+                <td class="col-xs-2" v-pre>{{ exporter.port }}</td>
+                <td
+                    class="col-xs-6"
+                    style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 0px;"
+                    v-pre
+                >
+                    {{ exporter.path_value }}
+                </td>
             </tr>
             {% empty %}
             <tr>